js进阶 11-22/23 js如何实现选项卡

一、总结

一句话总结：通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起，通过控制div标签的display属性可以实现选项卡的选项切换。

1、某些样式设置了，但是出不来效果的原因可能是什么？

优先级会导致某些特效出不来

现在设置的优先级低于之前的

可以通过加父标签的方式来增加优先级

2、如何增加样式的优先级？

可以通过加父标签的方式来增加优先级

3、如何实现一组标签中点某个标签，这个标签的样式改变？

动态给点的标签添加一个自己写好的激活样式

71                 oli[this.index].className="active";

4、如何消除一个元素的所有类？

dom对象的className赋空值

67                     oli[j].className="";

5、如何让一个隐藏的元素显示？

将dom对象的style的display属性设置为none

68                     li_content[j].style.display='none'

6、如何获取一个id为content的div里面的另外的div？

getElement的链式写法（因为getElement是document的方法，其实也是dom对象的方法）

57         var li_content=    document.getElementById('content').getElementsByTagName('div')

二、js如何实现选项卡

aaarticlea/png;base64,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uZf23nsgVSgre7/991UPwC50x+0jaa+9+tHBBx1Aud6UnjDxyz1jx35I5eohY6csi9rb77wn/tneu+m3zxYuXEQlJSXygAcZO+5D2rV7d+rcqaNUGsOHX0qPPvq4Evm7ZftGdXxlOdQb/tVKexa5rN555x36+OOP6RtVub366qt08skn09///nd67733RCgfeeQROv7440WcvLytWLGCXn755ZRzBa3lCy+8kFq0aCHrWewZLoc5c+bQ3LlzRfj+8Ic/yHoW5oMPPtgXGi5jPsef//xneumll+Q77ztp0iQRw1NOOUXWZXWbpFEXws1C+NNPP9HkyZPpzTffFHHkyo0rHc4XCytXUOeffz61bt1aWiyHHHKILBnzxO8luOLK3/l8r7zyimw75phj5DsL+7777utf39NPPy1/Gw9P+I844ggqKyuT71zR7bfffrKOK7ts5ZO9xLIJN0QbVKcOx+PW8G029MjD6YlnnqOlS5bSGnVj3/qXEUqo95I3CFlh7XiCRj/3Ah184AG+L9OLYMmFa6+5iu6+70G66vLLiG/yt995V6xWFh4+x4yZs6ikUYkINL8YyunOn/8jrf5tNe2z9wCqqmIL01IW5DbUVVmokz+ZotYPTF6Dm8/6wLP4OK9//etfRWj52merVgNbe7vssouqUIbLft999524M3bffXf/+C5duoiFl35OT7h5YfHiimvYsGFy3pNOOknWX3nllXTbbbdJxcCMHj2abr31Vv8cvM8bb7whotekSRM/n9wCYNH8+eefqV27dvVSLtlga/rEE08UsWbeffddqejY4r300ktl3X/+8x868sgjpUXiVULZXDt8jXxOhq9vjz32oEWLFklrp1evXmLFP/nkk3TCCSfQRx99JNd/xRVXUHl5uX8OXnfLLbfQQw89JN+91g9XeDfeeKNUuADUJ3Um3J5o6KALg/64z0AqX18h8UyWdRq9/trr1L5De+rTZw+qqthADzz6hA6LUtvj8aQbhLK8gc8dk2Ilqe+Welj26teX7r7nPurerSutL19PTZXQ8LaFCxbS7Lnz6E9nn+me16aK8g305KhnaPilF1Hb7duKxZVIGNS4cWP1gB5HY8a8SM2bNRXLlvORUMdFrPobW8RrPTBnnHGGfJ5++unyefbZZ4uFx/uwNekJkOf7zoRf9m6l4O3P7oNffvmF3nrrLbGY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" alt="" />

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>选项卡2</title>

     <style>

     *{margin:0px;padding: 0px }

     body{padding: 50px}

     #list{

         list-style-type: none;

         height: 30px;

         font-size: 14px

     }

     #list li{

         width: 80px;

         margin-right: 5px;

         height: 30px; line-height: 30px;

         text-align: center;

         border: solid green 1px;border-bottom: none;

         border-radius: 5px 5px 0 0;

         float: left;

         cursor: pointer;

     }

     #content div{

         width: 400px;

         height: 150px;

         border:1px solid green;

         display: none;

         background: rgba(100,50,20,0.2);

      }

      #content div.show{display: block;}

      #list li:hover{

              background: rgba(100,50,20,0.4);

         }

     .active{background: rgba(100,50,20,0.2);}

     </style>

 </head>

 <body>

 <div id="tab">

     <ul id="list">

         <li class="active">第一部分</li>

         <li>第二部分</li>

         <li>第三部分</li>

     </ul>

     <div id="content">

         <div class="show">JS进阶......</div>

         <div>JQ精讲......</div>

         <div>JS+JQ+CSS3特效、技巧、案例专题......</div>

     </div>

 </div>

     <script>

         // var list=document.getElementById('list')

         // var content=document.getElementById('content')

         // var oli=list.getElementsByTagName('li')

         // var li_content=    content.getElementsByTagName('div')

         var oli=document.getElementById('list').getElementsByTagName('li')

         var li_content=    document.getElementById('content').getElementsByTagName('div')

         for(var i=0;i<oli.length;i++){

             oli[i].index=i

             oli[i].onclick=function(){

                 //首先获取到当前被点击li的索引

                 //alert(this.index)

                 //点击后让相应的div显示到当前

                 for(var j=0;j<li_content.length;j++){

                     oli[j].className="";

                     li_content[j].style.display='none'

                 }

                 li_content[this.index].style.display='block';

                 oli[this.index].className="active";

             }

         }

     </script>

 </body>

 </html>