js实例练习其一

最新推荐文章于 2024-07-08 18:01:35 发布

隙间来客

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量117

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_44030866/article/details/126557484

版权

Tab交换与扩展

思路：

1：循环全部添加click事件。

2：每次点击后循环所有标签A添加一个样式。

3：添加结束后，为自己添加样式。

CSS


        *{
            margin: 0px;
            padding: 0px;
        }
        a{
            text-decoration: none;
        }
        .nav{
            margin: 0px auto;
        }
        .nav a{
            display: block;
				width: 200px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				float: left;
				background: #AD1453;
				color: #fff;
				margin-right: 10px;
        }
        .nav a.hover{
				background: #1453ad;
			}
        .nav_con{clear: both;}
        .nav_con div{
            display: none;
        }
        .nav_con div:nth-child(1){
				  display: block;
			  }

Body

<div class="tab">
            <div class="nav">
                <a href="javascript:" class="hover" >行业新闻</a>
                <a href="javascript:" >公司新闻</a>
                <a href="javascript:" >技术动态</a>
            </div>
            
            <div class="nav_con">
                <div >
                    <img src="img/img1.png" alt="">
                </div>
                <div >
                    <img src="img/img2.png" alt="">
                </div>
                <div >
                    <img src="img/img1.png" alt="">
                </div>
            </div>
        </div>
       <!-- 第二个tab -->
		<div class="tab">
            <div class="nav" >
                <a href="javascript:;" class="hover">大学</a>
                <a href="javascript:;">中学</a>
                <a href="javascript:;">小学</a> 
            </div>
            
            <div class="nav_con">
                <div>大学内容</div> 
                <div>中学内容</div>
                <div>小学内容</div>
            </div>
        </div>
    
    
    <!-- 第三个tab -->
        <div class="tab">
            <div class="nav" >
                <a href="javascript:;" class="hover">大学</a>
                <a href="javascript:;">中学</a>
                <a href="javascript:;">小学</a> 
            </div>
            
            <div class="nav_con">
                <div>大学内容</div> 
                <div>中学内容</div>
                <div>小学内容</div>
            </div>
        </div>

JS部分

var navsNodes = document.querySelectorAll(".nav");
    
            for(var i=0;i<navsNodes.length;i++){
                
                navsNodes[i].addEventListener('click',function(e){
                    var navs = e.target.parentNode.children;
                    for(var j=0;j<navs.length;j++){
                        navs[j].className="";
                        navs[j].setAttribute("index",j);
                    }
                    var thisIndex = e.target.getAttribute("index");
                    var nav_cons = e.target.parentNode.nextElementSibling.children;
                    for(var j=0;j<nav_cons.length;j++){
						  nav_cons[j].style.display = "none";
					  }
                    nav_cons[thisIndex].style.display = "block";
                    e.target.className="hover";
                })
            }