一个简单的Web标签页

83 阅读 0 评论 55 点赞

我是靠谱客的博主自信书本，最近开发中收集的这篇文章主要介绍一个简单的Web标签页，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Tab标签页</title>
</head>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
li{
list-style-type: none;
}
body{
margin: 50px;
}
.tabTitle ul li{
float: left;
border: 1px solid #abcdef;
height: 30px;
line-height: 30px;
padding: 0 15px;
margin-right: 3px;
cursor: pointer;
}
.tabTitle ul{
overflow: hidden;
}
.tabContent div{
border: 1px solid #f60;
width: 300px;
height: 250px;
padding: 15px;
}
.hide{
display: none;
}
.current{
background-color: red;
}
</style>
<script type="text/javascript" src="jquery1.7.2.js"></script>
<script>
$(function(){
var $div=$(".tabContent div");
$("li").click(function(){
$(this).addClass('current').siblings().removeClass('current');
var index=$(this).index();
$div.eq(index).show().siblings().hide();
})
})
</script>
<body>
<div class="tabTitle">
<ul>
<li class="current">XHTML</li>
<li>CSS</li>
<li>JQUERY</li>
</ul>
</div>
<div class="tabContent">
<div>XHTML的内容</div>
<div class="hide">CSS的内容</div>
<div class="hide">JQUERY的内容</div>
</div>
</body>
</html>

<script>
$(function(){
var $div=$(".tabContent div");
$("li").click(function(){
$(this).addClass('current').siblings().removeClass('current');
var index=$(this).index();
$div.eq(index).show().siblings().hide();
})
})
</script>
这是程序的主要部分，在这里面，有addClass（）和removeClass（）两个方法可以给jQuery对象添加class类。里面的siblings（）方法，找到兄弟节点。
index()方法是为了找到索引，索引是从0开始的。类似于数组的下标。
在下面的div中，用了show()和hide()这两个方法。来控制div的显示个隐藏。刚学习的新手，有什么不足，请大神们提出来，相互学习，共同进步。