选项卡切换（可优化使用下标）

最新推荐文章于 2024-08-26 11:12:18 发布

dongsdh

最新推荐文章于 2024-08-26 11:12:18 发布

阅读量313

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript武器库 html css javascript

本文链接：https://blog.csdn.net/dongsdh/article/details/79566668

javascript 同时被 3 个专栏收录

34 篇文章

订阅专栏

css

29 篇文章

订阅专栏

html

19 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript创建一个简单的Tab面板效果。通过设置特定的CSS样式和JavaScript函数实现点击切换不同的内容块，并且保持选中状态。此示例包含完整的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

	<header>
		<div id="aa" class="blo">1111</div>
		<div id="bb">222</div>
		<div id="cc">333</div>
		<div id="dd">444</div>
	</header>
	<ul>
		<li class="act">
			<a href="#aa">1111111</a>
		</li>
		<li>
			<a href="#bb">22222222222</a>
		</li>
		<li>
			<a href="#cc">333333333333</a>
		</li>
		<li>
			<a href="#dd">4444444444</a>
		</li>
	</ul>

css

	.act {
		color: red;
	}
	
	header>div {
		display: none;
	}
	
	header .blo {
		display: block;
	}
	
	.blo {
		display: block;
	}

script

	tabs("ul", "click", "li a", "act", "blo");

	function tabs(box, event, child, eclass, eidclass) {
		$(box).on(event, child, function(e) {
			e.preventDefault();
			$(this).parent().addClass(eclass).siblings().removeClass(eclass);
			$($(this).attr("href")).addClass(eidclass).siblings().removeClass(eidclass);
		});
	}