JS之tab栏切换

最新推荐文章于 2024-03-21 23:56:55 发布

weixin_30929011

最新推荐文章于 2024-03-21 23:56:55 发布

阅读量52

点赞数

原文链接：http://www.cnblogs.com/creazybeauty/p/8065499.html

版权

补充：

当所需标签在多处使用时，而你又想取得某一处的标签，就可以用querySelectorAll()来读取某元素的所有子元素

例如：var liArr = document.querySelectorAll('.show-main-tab2 li');这样是取得show-main-taab2下的所有li

要求：将鼠标放在tab栏上某一处，下面就会显示出该内容

<body>
<div class="box">
<ul>
<li class="current">鞋子</li>
<li>袜子</li>
<li>帽子</li>
<li>裙子</li>
<li>裤子</li>
</ul>
<span class="show">鞋子</span>
<span>袜子</span>
<span>帽子</span>
<span>裙子</span>
<span>裤子</span>
</div>

<script>
//需求：鼠标放到上面的li上，li本身变色(添加类)，对应的span也显示出来(添加类)
//思路：点亮盒子     利用索引值显示盒子
//获取事件源和相关元素
var liArr = document.getElementsByTagName("li");
var spanArr = document.getElementsByTagName("span");
//绑定事件
for (var i = 0; i < liArr.length; i++) {
         //书写驱动程序
    //绑定索引值
    liArr[i].index = i;
    liArr[i].onmouseover = function(){
        //点亮盒子     利用索引值显示盒子
        for (var j = 0; j < liArr.length; j++) {
            liArr[j].className="";
            spanArr[j].className="";
        }
        this.className = "current";
        spanArr[this.index].className = "show";
    }
}

</script>
</body>

转载于:https://www.cnblogs.com/creazybeauty/p/8065499.html

weixin_30929011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS之tab栏切换

补充：当所需标签在多处使用时，而你又想取得某一处的标签，就可以用querySelectorAll()来读取某元素的所有子元素例如：var liArr = document.querySelectorAll('.show-main-tab2 li');这样是取得show-main-taab2下的所有li要求：将鼠标放在tab栏上某一处，下面就会显示出该内容<body&...
复制链接

扫一扫