当前位置：编程学习 > JS >>
答案：先给个官方例子。可以先弄出来看看效果
html复制代码 代码如下:
<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="shortcut icon" href=><link rel="stylesheet" type="text/css"
href=></head>
<body><!-- tabs -->
<ul id="tabui" class="cs-tabs">
<li><a id="t1" href=><li><a id="t2" href=><li><a id="t3" href=></ul>
<!-- panes -->
<div id="tabpans" class="cs-panes">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
viverra, leo sit amet auctor fermentum, risus lorem posuere
tortor, in accumsan purus magna imperdiet sem.
</p>
<p>
Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas
facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus
nibh metus, faucibus quis, semper ut, dignissim id, diam.
</p>
</div>
<div>
<p>
Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui,
molestie sed, tristique sit amet, blandit eu, turpis. Mauris
hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed
molestie dui quam vitae dui.
</p>
<p>
Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget
tortor. Maecenas id augue. Vivamus interdum nulla ac
dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus
eget dui volutpat molestie.
</p>
</div>
<div>
<p>
Maecenas at odio. Nunc laoreet lectus vel ante. Nullam
imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a,
nisl. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</p>
<p>
In sed dolor. Etiam eget quam ac nibh pharetra
adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu
mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis
nisi. Vivamus at enim. Integer semper imperdiet
massa. Vestibulum nulla massa, pretium quis, porta id,
vestibulum vitae, velit.
</p>
</div>
</div>
<!-- activate tabs with JavaScript -->
<script>
$(function() {
// :first selector is optional if you have only one tabs on the page
$(".cs-tabs:first").tabs(".cs-panes:first > div");
});
</script>
</body>
</html>
css复制代码 代码如下:
/* root element for tabs */
ul.cs-tabs {
margin:0 !important;
padding:0;
height:30px;
border-bottom:1px solid #666;
}
/* single tab */
ul.cs-tabs li {
float:left;
padding:0;
margin:0;
list-style-type:none;
}
/* link inside the tab. uses a background image */
ul.cs-tabs a {
float:left;
font-size:13px;
display:block;
padding:5px 30px;
text-decoration:none;
border:1px solid #666;
border-bottom:0px;
height:18px;
background-color:#efefef;
color:#777;
margin-right:2px;
position:relative;
top:1px;
outline:0;
-moz-border-radius:4px 4px 0 0;
}
ul.cs-tabs a:hover {
background-color:#F7F7F7;
color:#333;
}
/* selected tab */
ul.cs-tabs a.on {
background-color:#ddd;
border-bottom:1px solid #ddd;
color:#000;
cursor:default;
}
/* tab pane */
.cs-panes div {
display:none;
border:1px solid #666;
border-width:0 1px 1px 1px;
min-height:150px;
padding:15px 20px;
background-color:#ddd;
}
该功能是通过jqueryObject.tabs()方法来实现的
$(".cs-tabs:first").tabs(".cs-panes:first > div");
官方是用的class，我对div都加了id。
$("#tabui").tabs("#tabpans >div");
$("#tabui").tabs("#tabpans>div",{event:'click',tab:'p',effect: 'default',current:'on'});
这两个同同$(".cs-tabs:first").tabs(".cs-panes:first > div");的效果
是不是很强大呢。
下面就以上配置参数说明描述如下：
| 属性名称 | 默认 值 | 描述 |
|---|---|---|
| current | 'current' | CSS类名当前活跃的选项卡。 |
| effect | 'default' |
效果被用来当点击一个选项卡。 这可以 戏剧性地改变这种行为的选项卡。 这是 可用的内置的效果:
你也可以 让自己的效果 。 |
| event | 'click' | 指定事件一个选项卡时打开。 默认情况下,这个 发生在当用户单击选项卡。 另一个有效值 是 “mouseover” 和 上一个：EasyUI 中 MenuButton 的使用方法 更多图片编程知识:
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络， |
