JS——Tab栏切换

最新推荐文章于 2023-03-30 15:00:12 发布

月亮小小饼干

最新推荐文章于 2023-03-30 15:00:12 发布

阅读量372

点赞数 3

分类专栏： JS 文章标签： js javascript html5 css 前端

本文链接：https://blog.csdn.net/qq_44945999/article/details/115254368

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、操作步骤

1.当鼠标点击某个选项卡的时候，当前选项卡的底色变为红色（排他思想）
2.给每个选项添加自定义属性，属性值从0开始
当点击选项卡的时候，显示对应序号的内容，其余选项卡的内容隐藏

二、代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Tab栏切换案例</title>
		<style>
			ul li {
				list-style: none;
			}
			.tab_list {
				width: 640px;
				height: 39px;
				border-bottom: 1px solid #C81623;
			}
			.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: #FFFFFF;
			}
			.item_info {
				padding: 20px 0 0 20px;
			}
			.item {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li class="current">商品介绍</li>
					<li>规格与包装</li>
					<li>售后保障</li>
					<li>商品评价</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>
		</div>
		<script>
			// 1.排他思想  点击那个选项卡，那个选项卡的底色变成红色
			// 2.显示对应选项卡的内容
			//   核心思路：给上面的tab_list里面的所有li添加自定义属性 属性值从0开始
			//			  当点击那个选项卡时，把tab_con里面对应序号的内容显示出来，其余隐藏
			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 j = 0; j < items.length; j++) {
						items[j].style.display = 'none';
					}
					items[index].style.display = 'block';
				}
			}
		</script>
	</body>
</html>

三、结果截图

在这里插入图片描述

本案例多次采用排他思想，保证每一次的点击选项卡，只有当前选项卡和内容发生变化。

月亮小小饼干

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS——Tab栏切换

一、操作步骤1.当鼠标点击某个选项卡的时候，当前选项卡的底色变为红色（排他思想）2.给每个选项添加自定义属性，属性值从0开始当点击选项卡的时候，显示对应序号的内容，其余选项卡的内容隐藏二、代码实现<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Tab栏切换案例</title> <style> ul li { list
复制链接

扫一扫