网页选项卡应用实现-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript实现的网页选项卡应用，通过jQuery库简化DOM操作，展示了如何创建交互式的选项卡界面，使用户可以切换查看不同类别的内容。

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

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页选项卡应用</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<style type="text/css">
	body{font-size:13px}
	ul,li{margin:0;padding:0;list-style:none}
	#menu li{text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer}
	#menu li.tabFocus{width:50px;font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative;}
	#content{width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px}
	#content li{display:none}
	#content li.conFocus{display:block}
</style>
<script type="text/javascript">
	$(function(){
		$("#menu li").each(function(index){
			$(this).bind("click mouseover",function(){
				$("#menu li.tabFocus").removeClass("tabFocus");
				$(this).addClass("tabFocus");
				$("#content li:eq("+index+")").show().siblings().hide();
			});
		});
	})
		
</script>
</head>
<body>
	<ul id="menu">
		<li class="tabFocus">家居</li>
		<li>电器</li>
		<li>二手</li>
	</ul>
	<ul id="content">
		<li class="conFocus">我是家居的内容</li>
		<li>欢迎您来到电器城</li>
		<li>二手市场，产品丰富多彩</li>
	</ul>
</body>
</html>

转载于:https://my.oschina.net/u/2552902/blog/543936