js-tab选项卡切换

最新推荐文章于 2023-08-08 09:41:16 发布

wamztkn

最新推荐文章于 2023-08-08 09:41:16 发布

阅读量618

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wamztkn/article/details/124318330

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
		.tab {
			width: 800px;
			margin: 100px auto;
		}
		.tab_list{
			height: 42px;
			background-color: #f1f1f1;
			border: 1px solid #ccc;
			box-sizing: border-box;
			overflow: hidden;
		}
		.tab_list ul li {
			float: left;
			height: 42px;
			line-height: 42px;
			padding: 0 20px;
			cursor: pointer;
			
		}
		.current {
			background-color: #c81623;
			color: #FFFFFF;
		}
		.item {
			display: none;
		}	
		.item:nth-child(1) {
		            display: block;
		        }
    </style>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item">商品介绍模块</div>
            <div class="item">规格与包装模块</div>
            <div class="item">售后保障模块</div>
            <div class="item">商品评价模块</div>
            <div class="item">手机社区模块</div>
        </div>
    </div>
	<script type="text/javascript">
		 var tab_list = document.querySelector('.tab_list');
		 var lis = document.querySelectorAll('li');
		 var items = document.querySelectorAll('.item');
		 for(var i = 0;i<lis.length;i++){
			 // 设置自定义属性
			 lis[i].setAttribute('index',i);
			
			//  lis[i].addEventListener('click',function(){
			// 	 for(var i=0;i<lis.length;i++){
			// 		 lis[i].className = '';
			// 	 }
			// 	 this.className = 'current';
				 
			// 	 var index = this.getAttribute('index');
			// 	 for(var i = 0;i<items.length;i++){
			// 	 	items[i].style.display='none';
			// 	 }
			// 	items[index].style.display = 'block';
			//  })
			 
			 // 绑定li的点击事件
			 lis[i].onclick = function(){
				 // 排他思想,去掉兄弟的背景
				 for(var i=0;i<lis.length;i++){
				 	 lis[i].className = '';
				 }
				 // 点击该li,添加current样式
				 this.className = 'current';
				 // 获取自定义属性
				 var index = this.getAttribute('index');
				 // console.log(index);
				  // 排他思想,去掉item的兄弟的背景
				 for(var i = 0;i<items.length;i++){
				 	items[i].style.display='none';
				 }
				 items[index].style.display='block';
				 //  显示点击的内容，显示index  li里的序号
			
			 }
			
		 }
		  
	</script>
</body>

</html>

wamztkn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-tab选项卡切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫