复制代码 代码如下:
$("ul > li").hover(tab);
function tab() {
$(this).addClass("ll").siblings().removeClass("ll");
var tab = $(this).attr("title");
$("#" + tab).show().siblings().hide();
};
li中和title必须和div中的id一致！
完整的代码
复制代码 代码如下:
<script type="text/javascript" src="https://www.jb51.net/jquery-132min2.js"></script>
<script type="text/javascript">
$(function() {
$("ul > li").click(tab);
function tab() {
$(this).addClass("ll").siblings().removeClass("ll");
var tab = $(this).attr("title");
$("#" + tab).show().siblings().hide();
};
});
</script>
</head>
<body>
<ul>
<li title="d1">1</li>
<li title="d2">2</li>
<li title="d3">3</li>
</ul>
<div>
<div>11111</div>
<div>22222</div>
<div>33333</div>
</div>
简单的jQuery标签页Simple Tabs w（使用CSS及JQuery）
我知道有很多演示指导如何使用CSS及JQuery创建标签页，但是我还是决定自己动手创建属于我自己的标签页。当然我并不知道技术手法上是否（与别人的）相同，但我希望这个指导很容易懂，甚至对于一个初学者来说搞懂它并不费力。
原文：
对那些不是很熟悉JQuery的同学，请看他们的官方网站以获得一个大体的概述，同时你也可以进一步探究这些、这些、还有这些等许多关于JQuery的指导。
Step1. Wireframe – HTML & CSS
Wireframe: a visual representation of the structure of a web page
线框：对网页安排的一种视觉上的描绘
使用无序列表（ul）来呈现你的标签，然后进一步将一个类型（class）为”tab_container”的容器（div）放在它的下方。记住每 一个列表的项（tabs）都有一个”href”的属性值和”.tab_content”div的ID名称一致。这是十分重要的一步！因为我们用 JQuery实现（切换标签页的）动作就要靠它。请记住我为了更容易被你们理解所以使用一般的名称”tab1″。事实上，你必须使用关键字，这样更语义化 （semantic），更有益于你的SEO（搜索引擎优化）。
HTML
复制代码 代码如下:
<ul class=”tabs”>
<li><a href=”#tab1″>Gallery</a></li>
<li><a href=”#tab2″>Submit</a></li>
</ul>
<div class=”tab_container”>
<div id=”tab1″ class=”tab_content”>
<!–Content–>
</div>
<div id=”tab2″ class=”tab_content”>
<!–Content–>
</div>
</div>
如果你之前曾尝试通过CSS创建过标签页，你可能已经在标签边框正确对齐的问题上受到过挫折，以下就是一些大部分朋友碰到的常见问题。
这里我想出来一个解决方案能处理这个讨厌的问题。请看看下面的图片然后看一下CSS，以及它边上的辅助注释，以便更好的理解。
复制代码 代码如下:
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*–Set height of tabs–*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*–Subtract 1px from the height of the unordered list–*/
line-height: 31px; /*–Vertically aligns the text within the tab–*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*–Pull the list item down 1px–*/
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff; /*–Gives the bevel look with a 1px white border inside the list item–*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover { /*–Makes sure that the active tab does not listen to the hover properties–*/
background: #fff;
border-bottom: 1px solid #fff; /*–Makes the active tab look like it's connected with its content—*/
}
Tab Content CSS
复制代码 代码如下: