网页选项卡的应用

最新推荐文章于 2023-12-05 15:10:28 发布

田小思

最新推荐文章于 2023-12-05 15:10:28 发布

阅读量579

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/tian_123456789/article/details/53788017

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

（1）功能描述
在页面中，设置三个不同名称的选项卡，当点击某个选项卡时，下面的相对应的区域显示其相应的内容信息，同时选项卡的背景色与内容区域的背景颜色浑然一体，并且字体加粗，表示选中的状态。

（2）代码实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>网页选项卡的应用</title>
	<style type="text/css">
		body{
			font-size: 12px;
		}
		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:1px solid #666;
			border-bottom: 0;
			z-index: 100;
			position: relative;
		}
		#content{
			width: 260px;
			height: 80px;
			padding: 10px;
			background-color: #f3f2e7;
			clear: left;
			border:1px solid #666;
			position: relative;
			top:-1px;
		}
		#content li{
			display: none;
		}
		#content li.conFocus{
			display: block;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<script type="text/javascript">
	$(function() {
		//带参数遍历各个选项卡
		$("#menu li").each(function(index){
			$(this).click(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>

页面效果如下：

田小思

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
网页选项卡的应用

（1）功能描述在页面中，设置三个不同名称的选项卡，当点击某个选项卡时，下面的相对应的区域显示其相应的内容信息，同时选项卡的背景色与内容区域的背景颜色浑然一体，并且字体加粗，表示选中的状态。（2）代码实现网页选项卡的应用 body{ font-size: 12px; } ul, li{ margin: 0; padding:0
复制链接

扫一扫

专栏目录