排他思想干货

最新推荐文章于 2025-12-27 19:25:02 发布

原创最新推荐文章于 2025-12-27 19:25:02 发布 · 171 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css #javascript

这篇文章展示了如何使用HTML和CSS构建一个基础的Tab切换界面，通过清除所有元素样式并设置当前选中项的样式。JavaScript部分运用了排他思想，当点击列表项时，移除所有列表项的‘current’类并添加到被点击的项，同时隐藏所有内容模块并显示与选中列表项对应的内容。

1.所有元素全部清除样式
2.给当前元素设置样式
3.注意顺序不能颠倒，首先要把除自己外的其他人干掉，在设置自己

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			<style>
			body{
				background-Color:#ff9711;
			}
			    * {
			        margin: 0;
			        padding: 0;
			        border: 0;
			        box-sizing: border-box;
			    }
			    
			    li {
			        list-style: none;
			    }
			    
			    .tab {
			        width: 650px;
			        margin: 100px auto;
			    }
			    
			    .tab .tab_list {
			        width: 650px;
			        height: 70px;
			        line-height: 35px;
			        border: 1px solid #999;
			        background-color: #ccc;
			    }
			    
			    .tab_list li {
			        float: left;
			        height: 33px;
			        padding: 0 20px;
			        cursor: pointer;
			        text-align: center;
			    }
			    
			    .current {
			        background-color: #c81523;
			        color: #fff;
			    }
			    
			    .tab_con {
			        clear: both;
			    }
			    
			    .item {
			        display: none;
			    }
			</style>

		</style>
	</head>
	<body>
		<div class="tab">
		    <div class="tab_list">
		        <ul>
		            <li class="current">商品介绍</li>
		            <li>规格与包装</li>
		            <li>售后保障</li>
		            <li>商品评价（5000）</li>
		            <li>手机社区</li>
		        </ul>
		    </div>
		    <div class="tab_con">
		        <div class="item" style="display: block;">商品介绍模块内容</div>
		        <div class="item">规格与包装模块内容</div>
		        <div class="item">售后保障模块内容</div>
		        <div class="item">商品评价（5000）模块内容</div>
		        <div class="item">手机社区模块内容</div>
		    </div>
		</div>
<script>
    var lis = document.querySelector('ul').querySelectorAll('li');
	console.log(lis)
    var items = document.querySelectorAll('.item');
    for (i = 0; i < lis.length; i++) {
        // 为5个li设置自定义属性，用于当索引号
        lis[i].index = i
        lis[i].onclick = function() {
            // 1.排他思想
            for (i = 0; i < lis.length; i++) {
                lis[i].className = '';
            }
            this.className = 'current';
            // 2.获取一一对应的自定义索引号,当鼠标点击了li后，获取该li的索引号index并赋值给变量index
            // 这里只能用this，选中触发的事件，lis[i]则是循环最后的事件	
            for (var i = 0; i < items.length; i++) {
                items[i].style.display = 'none';
            }
			items[this.index].style.display = 'block';	
        }
    }
</script>

	</body>
</html>