先上图（本篇涉及html、css、jQuery）
tab切换.gif
效果如上，如果是前端小白，或许这篇文章很适合你，每个重要的地方我都会添加注释解释清楚
首先，页面当然是html码起来的喽，整体是一个div框，上面的标签部分采用ul和li标签实现，内容部分就是简单的table。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换效果</title>
<link rel="stylesheet" href="css/test3.css">
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div class="box">
<!-- 标题部分 -->
<div class="title">
<!--这里需要注意每个li标签中加了自定义的role标签，而且每个li的role属性值相同-->
<ul>
<li id="gonggao" role="tab-title">公告</li>
<li id="guize" class="selected" role="tab-title">规则</li>
<li id="luntan" role="tab-title">论坛</li>
<li id="anquan" role="tab-title">安全</li>
<li id="gongyi" role="tab-title">公益</li>
</ul>
</div>
<!-- 内容部分，每一个标题对应不同内容 -->
<div class="content">
<div class="gonggao disappear">
<table>
<tr>
<td>公告1</td>
<td>公告2</td>
</tr>
<tr>
<td>公告3</td>
<td>公告4</td>
</tr>
</table>
</div>
<div class="guize appear">
<table>
<tr>
<td>规则1</td>
<td>规则2</td>
</tr>
<tr>
<td>规则3</td>
<td>规则4</td>
</tr>
</table>
</div>
<div class="luntan disappear">
<table>
<tr>
<td>论坛1</td>
<td>论坛2</td>
</tr>
<tr>
<td>论坛3</td>
<td>论坛4</td>
</tr>
</table>
</div>
<div class="anquan disappear">
<table>
<tr>
<td>安全1</td>
<td>安全2</td>
</tr>
<tr>
<td>安全3</td>
<td>安全4</td>
</tr>
</table>
</div>
<div class="gongyi disappear">
<table>
<tr>
<td>公益1</td>
<td>公益2</td>
</tr>
<tr>
<td>公益3</td>
<td>公益4</td>
</tr>
</table>
</div>
</div>
</div>
<script src="js/test3.js"></script>
</body>
</html>
！上面需要注意到li标签的id属性值和与标题对应的内容部分的class属性值
至于css部分，关键的就是规则那个li标签里面的selected，还有在内容部分的div中出现的disappear和appear
这三个代码很少，但是作用很大
//让当前内容部分消失
.disappear {
display: none;
}
//让当前内容显示出来
.appear {
display: block;
}
//更改标题的颜色
.box .selected {
background-color: #fff;
}
接下来就是关键的js代码了
/**
* author: hkk;
*
*/
(function() {
//还记得前面提到的li标签里面的role属性吗，这里通过这个role获取jQuery对象
//由于多个li标签的role值相同，这里可以理解为这个对象被这些li标签共有
var $tab = $("li[role=tab-title]");
//给这个对象绑定事件，mouseover表示当鼠标经过时会被触发
$tab.on('mouseover', function(event) {
var $this = $(this); //获取当前鼠标经过位置的li标签的对象
showContent($this); //自己写的方法，用于显示对应的内容，传入参数为当前li标签的对象
showBac($this); //自己写的方法，用于更改当前选择的li标签的背景色
var $siblings = $this.siblings(); //jQuery中的方法，用于获取与当前对象在同级关系的同辈元素的集合
//jQuery中的each方法，用于遍历上面的集合
$siblings.each(function(index,el) {
var $el = $(el); //index是索引，而这个el就是我们所需的同辈元素，在这里得到它的jQuery对象
var id = $el.attr("id"); //获取该对象的id属性值
removeBac(id); //自己写的方法，用于移除该li标签对应的内容
removeContent($el); //自己写的方法，用于移除该li标签的背景色
});
});
//该方法时根据传入的li标签的对象，判断它的class中是否含有selected这个值，有的话直接移除
//在css部分提到过，这个值是设置选中标签的背景色
function removeBac($item) {
if ($item.hasClass("selected")) {
$item.removeClass("selected");
}
}
//这个方法时根据传入的li标签对象，给它的class中添加selected这个值
function showBac($item) {
$item.addClass("selected");
}
//根据传入的id值，通过类选择器来获取li标签对于内容的div对象
//虽然这个id值是li标签的id值，但是刚好是和它对应的内容部分的div的class属性值相同
function removeContent(id) {
var $item = $("." + id);
//前面css部分提到过，appear是让内容显示出来，disappear是让内容消失
//由于刚开始会有默认选择项，所以在内容部分div的class中会含有disappear或者appear
//这个方法时为了移除内容，所以如果该div中含有appear就移除这个值
if ($item.hasClass("appear")) {
$item.removeClass("appear");
}
$item.addClass("disappear");
}
//和上面移除内容的方法刚好相反
function showContent(id) {
var $item = $("." + id);
if ($item.hasClass("disappear")) {
$item.removeClass("disappear");
}
$item.addClass("appear");
}
})();
思想都在注释中，目前学前端也不久，如果有错误还望各位大侠指出来，如果比我还小白的话，看不明白的直接提出哈
网友评论