jquery简单使用（tab栏切换）

最新推荐文章于 2024-07-29 18:19:14 发布

twx95

最新推荐文章于 2024-07-29 18:19:14 发布

阅读量237

点赞数 4

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_41670405/article/details/137048912

版权

引用jquery.js文件

<script type="application/javascript" src="js/jquery.js"></script>

这里是我自己jquery.js文件存放的位置，换成自己的目录下的

html：

<div class="all">
    <ul class="tab">
       <li class="current">tab1</li>
       <li >tab2</li>
        <li>tab3</li>
    </ul>
    <div class="mes">
        <div style="display: block">tab1的内容</div>
        <div>tab2的内容信息</div>
        <div>tab3的信息</div>
    </div>
</div>

css:

*{
   padding: 0;
   margin: 0;
}
ul{
   list-style: none;
   height: 60px;
}
.tab li{
   float: left;
   margin: 0 10px;
   line-height: 60px;
   width: 60px;
   text-align: center;
   background: pink;
   cursor: pointer;
}
ul .current{
   background: #000000;
   color: white;
}
.mes{
   margin-top: 10px;
   border: 1px solid #000000;
   height: 150px;
   width: 200px;
}
.mes div{
   display: none;
}

js:

$(function () {
    $(".tab").on("click",'li',function () {
        // tab切换
        $(this).addClass("current").siblings().removeClass("current");
        var index = $(this).index();
        // tab栏切换对应的内容
        $(".mes div").eq(index).show().siblings().hide();

    });
});

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>切换tab栏</title>
    <script type="application/javascript" src="js/jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            height: 60px;
        }
        .tab li{
            float: left;
            margin: 0 10px;
            line-height: 60px;
            width: 60px;
            text-align: center;
            background: pink;
            cursor: pointer;
        }
        ul .current{
            background: #000000;
            color: white;
        }
        .mes{
            margin-top: 10px;
            border: 1px solid #000000;
            height: 150px;
            width: 200px;
        }
        .mes div{
            display: none;
        }
    </style>
    <script>
        $(function () {
            $(".tab").on("click",'li',function () {
                  // tab栏切换
                  $(this).addClass("current").siblings().removeClass("current");
                  var index = $(this).index();
                  // tab栏切换对应的内容
                  $(".mes div").eq(index).show().siblings().hide();

            });
        });
    </script>
</head>
<body>
<div class="all">
    <ul class="tab">
       <li class="current">tab1</li>
       <li >tab2</li>
        <li>tab3</li>
    </ul>
    <div class="mes">
        <div style="display: block">tab1的内容</div>
        <div>tab2的内容信息</div>
        <div>tab3的信息</div>
    </div>
</div>
</body>
</html>