您的位置：首页 > Web前端 > JQuery

jQuery实现网页选项卡

2014-04-07 17:43 267 查看

我们看看效果图

实现上面的效果其实很简单的，代码不需要很多，只要你会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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航