jQuery实现网页选项卡

最新推荐文章于 2024-08-26 12:07:23 发布

zzjmay

最新推荐文章于 2024-08-26 12:07:23 发布

阅读量1k

点赞数

文章标签：网页选项卡 jQuery css

本文链接：https://blog.csdn.net/zzjmay/article/details/23120017

版权

我们看看效果图

实现上面的效果其实很简单的，代码不需要很多，只要你会jQuery和css布局就好

select.html

<!DOCTYPE html>
<html>
  <head>
    <title>网页选项卡</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../css/select.css">
    <script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../js/select.js"></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>

select.css

@CHARSET "UTF-8";

* {
	padding: 0px;
	margin: 0px;
}

ul,li {
	list-style-type: 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: #f3f2e7;
	border: #666 1px solid;
	border-bottom: 0px;
	z-index: 100;
	position: relative;
}

#content {
	width: 260px;
	height: 80px;
	padding: 10px;
	background: #f3f2e7;
	border: #666 1px solid;
	position: relative;
	clear:left;
	top: -1px;
}

#content li {
	display: none;
}

#content li.conFocus{
	display: block;
}

select.js

$(function() {

	$("#menu li").each(function(index) {

		$(this).mouseover(function() {
			// 为每个主菜单绑定单击事件
			$("#menu li").removeClass("tabFocus");
			$(this).addClass("tabFocus");//这两行代码实现的是保证自由一个有样式

			$("#content li:eq(" + index + ")").show(300).siblings().hide();//siblings()获取同辈元素
		});
	});
});

注意：要实现融合效果的话要设置两点，一个是主选项卡的下边框要去掉，第二，要将子内容设置成相对布局，并向上一个高度-1px