选项卡切换（js与jq）

最新推荐文章于 2024-08-04 16:33:59 发布

aogn3394

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量469

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/moying328/p/8251510.html

版权

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡切换（js）</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font-size: 12px;font-family: "新宋体";} #cen_right_top{width:720px;margin:40px auto 0 auto;} #cen_right_top .active{background:#000000;color:#ffffff;} #cen_right_top h3{line-height:35px; text-align:center;float:left;height:35px;width:182px;margin:0px;padding:0px; background-color:#ffffff;font-size:14px;color:#000000; font-weight:lighter;cursor:pointer;} #cen_right_top div{font-size:14px;display:none;clear:both;height:100px; padding:20px 0px 0px 20px;border-top-width:medium;border-top-style:solid; border-top-color:#000000;} </style> </head> <body> <div id="cen_right_top"> <h3 class="active">战地系列</h3> <h3>巫师系列</h3> <h3>刺客系列</h3> <div style="display:block">战地系列的内容</div> <div>巫师系列的内容</div> <div>刺客系列的内容</div> </div> </body> <script> window.οnlοad=function() { var oTab=document.getElementById("cen_right_top"); var aH3=oTab.getElementsByTagName("h3"); var aDiv=oTab.getElementsByTagName("div"); for(var i=0;i<aH3.length;i++) { aH3[i].index=i; aH3[i].οnclick=function() { for(var i=0;i<aH3.length;i++) { aH3[i].className=""; aDiv[i].style.display="none"; } this.className="active"; aDiv[this.index].style.display="block"; } } } </script> </html>

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

 1 window.οnlοad=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].οnclick=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的用法。

转载于:https://www.cnblogs.com/moying328/p/8251510.html

aogn3394

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡切换（js与jq）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>选项卡切换（js）</title> <style type="text/css"> *{margin:0;padding:0;list-...
复制链接

扫一扫