jquery选项卡

最新推荐文章于 2020-12-31 10:53:44 发布

yy211zhu

最新推荐文章于 2020-12-31 10:53:44 发布

阅读量3.3k

点赞数

分类专栏： JavaScript Jquery web 文章标签： jquery 函数索引

本文链接：https://blog.csdn.net/yy211zhu/article/details/51355957

版权

JavaScript 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

Jquery

13 篇文章 0 订阅

订阅专栏

web

13 篇文章 0 订阅

订阅专栏

下面是我写的简单的jquery选项卡，先讲讲主要用到的那些函数

index()函数，获取索引值，因为一个选项卡对应相应的内容
siblings()函数，当点击某个选项卡时，要使其它几个姊妹元素的display属性设置为none

具体代码请看下面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="tab.css">
    <script src="jquery-1.12.3.js"></script>
    <script>
        $(document).ready(function(){
           // alert("加载完毕！")
            $("#ulList li").click(function(){
                var UliArry=$("ulList li");//获取ulList下所有的li元素集合
                var DivArry=$(".tabcontent div");//获取tabcontent下所有的div元素
              //  alert(DivArry.length);
                var count=$(this).index();//获取li元素的索引
                DivArry.eq(count).css("display","block").siblings().css("display","none");
                //alert(count);
            })
        })
    </script>
</head>
<body>
    <div>
       <div class="header"><h2>选项卡</h2></div>
       <div class="tab">

           <ul id="ulList">
               <li id="lia">选项卡1</li>
               <li id="lib">选项卡2</li>
               <li id="lic">选项卡3</li>
           </ul>
       </div>
       <div style="clear:both;"></div>
       <div class="tabcontent">
           <div id="c1">选项卡内容1</div>
           <div id="c2">选项卡内容2</div>
           <div id="c3">选项卡内容3</div>
       </div>
    </div>
</body>
</html>

CSS代码

*{padding: 0; margin: 0;}
#ulList{

    background: #ddd;
    list-style: none;
}
#ulList li{
    float: left;
    width: 100px;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    font-size: 16px;
    background:#ddd;
    border-right: 1px solid orange;
    cursor: pointer;
}
#ulList li:hover{background-color: orange;}
.tabcontent{
    width:318px;
    height: 100px;
    background: orange;
}
#c1,#c2,#c3{
    display: none;
}