选项卡切换（js与jq）

这里css稍微有点基础就能看懂，主要说下js

 1 window.onload=function()
 2     {
 3     var oTab=document.getElementById("cen_right_top");
 4     var aH3=oTab.getElementsByTagName("h3");
 5     var aDiv=oTab.getElementsByTagName("div");
 6     for(var i=0;i<aH3.length;i++)
 7     {
 8         aH3[i].index=i;
 9         aH3[i].onclick=function()
10         {
11             for(var i=0;i<aH3.length;i++)
12             {
13                 aH3[i].className="";
14                 aDiv[i].style.display="none";
15             }
16             this.className="active";
17             aDiv[this.index].style.display="block";
18         }
19     }
20     }

这里js选项卡的原理是点击某一个<h3>之后，移除所有<h3>的class值（去除背景颜色），同时将所有div隐藏；

接着再将class="active"赋给当前的点击的<h3>，同时与其对应的div显示出来。

这里需要注意的是两个for循环，this的用法，以及index的含义，这些基础搜一下就有，不多说了。

同样的效果也可以用jquery实现

1 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
2 <script>
3  $(document).ready(function(){
4       $("#cen_right_top h3").click(function(){
5        $(this).addClass("active").siblings().removeClass("active");/*$("#cen_right_top h3").eq($(this).index())*/
6         $("#cen_right_top div").hide().eq($(this).index()).show();
7         });
8     });
9 </script>

 

将上面的js代码替换即可，原理基本相同，需要注意的是siblings的含义以及jquery中this的用法。

posted @ 2018-01-09 16:53  冷色调~  阅读(541)  评论(0)  编辑  收藏  举报