tab栏切换案列分析（仿京东商品）

喝水都塞牙缝(//̀Д/́/)

于 2022-02-11 19:07:14 发布

阅读量1.3k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/m0_59854777/article/details/122887013

版权

html

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
  <head>
  <meta charset="utf-8">
    <title>tab栏切换案列</title>
  </head>
  <style>
	
	.tab_list {
		background-color: #f7f7f7;
		border: 1px solid #eee;
		border-bottom: 1px solid #e4393c;
        height: 69px;
		
	}
	.tab_list li {
	    float: left;
		height: 39px;
		line-height: 39px;
		padding: 0 20px;
		text-align: center;

		list-style: none;
	}
	.tab_list .current {
	    background-color: #c81623;
		color: #fff;
	}

    .item {
	    display: none;
		padding: 50px;
	}
  </style>
 <body>
    <div class = "tab">
	    <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li >规格与包装</li>
                <li >质检报告</li>
                <li >售后保障</li>
                <li >商品评价<s>(5000+)</s></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" > 售后保障模块 </div>
            <div class="item" > 商品评价模块 </div>   
            <div class="item" > 本店好评商品模块 </div>   
		</div>
    </div>
	
	<script>
	    var tab_list = document.querySelector('.tab_list');  //获取元素
		var lis = tab_list.querySelectorAll('li');
		var items = document.querySelectorAll('.item');
		//点击背景模块变化
		for(var i = 0;i < lis.length; i++) {  //循环绑定点击事件
		    lis[i].setAttribute('index',i);   //设置索引号
			lis[i].onclick = 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';  //当前zi改变
			}
			items[index].style.display = 'block';
		}	
	    } 
	</script>
 </body>
</html>