Javascript

最新推荐文章于 2024-11-02 12:42:04 发布

kay-0_0

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量123

点赞数 1

本文链接：https://blog.csdn.net/weixin_52282744/article/details/116722256

版权

tab选项卡制作
结构图演示：

在这里插入图片描述

1、 HTML页面body编写

<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">商品评价（50000）模块内容</div>
			<div class="item">手机社区模块内容</div>
		</div>
	</div>
</body>

2、CSS样式编写

<style>
	*{
	 margin: 0;padding: 0;
	}
	li{
		list-style-type: none;
	}
	.tab{
		height: 978px;
		margin: 100px auto;
	}
	.tab_list{
		height: 39px;
		border: 1px solid #ccc;
		background-color: #f1f1f1;
	}
	.tab_list li{
		float: left;
		height: 39px;
		line-height: 39px;
		padding: 0 20px;
		text-align: center;
		cursor: pointer;
	}
	.tab_list .current{
		background-color: #c81623;
		color: #fff;
	}
	.item_info{
		padding: 20px 0 0 20px;
	}
	.item{
		display: none;
	}
</style>

3、JavaScript效果编写

<script>
	//获取事件源
	var tab_list = document.querySelector('.tab_list');
	var lis = tab_list.querySelectorAll('li');
	var items = document.querySelectorAll('.item');
	// console.log(items);
	// console.log(lis);
	//绑定单机事件
	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';
			}//这个循环用来做排他
			items[index].style.display='block';
		}
	}
</script>