JS tab栏

最新推荐文章于 2024-03-21 23:56:55 发布

原创最新推荐文章于 2024-03-21 23:56:55 发布 · 266 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#原生JStab栏

Javascript 专栏收录该内容

66 篇文章

订阅专栏

本文介绍了一个使用HTML和CSS实现的简单导航菜单示例，通过不同的样式控制和事件监听实现了导航栏的功能性和交互性。

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.top{
			overflow: hidden;
			padding:0;
			margin:0;
		}
		.tit{
			list-style: none;
			float:left;
			background-color: orange;
			border: 1px solid black;
			padding:6px;
		}
		.active{
			background-color: red;
		}
		.con{
			width: 200px;
			height: 200px;
			background-color: green;
			border:1px solid black;
			margin-top: 6px;
			display: none;
		}
		.con:first-child{
			display: block;
		}
	</style>
</head>
<body>
	<div class='box'>
		<ul class=top>
			<li class='tit active'>标题一</li>
			<li class='tit'>标题二</li>
			<li class='tit'>标题三</li>
			<li class='tit'>标题四</li>
		</ul>
		<div class='bottom'>
			<div class='con'>内容一</div>
			<div class='con'>内容二</div>
			<div class='con'>内容三</div>
			<div class='con'>内容四</div>
		</div>
	</div>
	<script>
		var box = document.querySelector('.box');
		var top = document.querySelector('.top');
		var tit = document.querySelectorAll('.tit');
		var bottom = document.querySelector('.bottom');
		var con = document.querySelectorAll('.con');
		// 采用事件委托
		//为每个按钮设置索引
		for(var i=0;i<tit.length;i++){
			tit[i].index = i;
		}
		top.onclick = function(e){
			var event = e || window.event;
			var target = event.target || event.srcElement;
			if(target.tagName === 'LI'){
				for(var i=0;i<con.length;i++){
					con[i].style.display = 'none';
					tit[i].className = removeClass(tit[i],'active')
					console.log(removeClass(tit[i],'active'))
				}
				console.log(target.index)
				tit[target.index].className += ' active';
				con[target.index].style.display = 'block';
			}
		}
		function removeClass(ele,str){
			var arr = ele.className.split(' ');
			arr.forEach(function(val,ind){
				if(str === val){
					arr.splice(ind,1);
				}
			});
			return arr.join(' ');
		}
	</script>
	
</body>
</html>