$(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’ | 效果被用来当点击一个选项卡。 这可以 戏剧性地改变这种行为的选项卡。 这是 可用的内置的效果: ‘default’ :一个简单的显示/隐藏效果。 这个 标签的默认行为。
相关文章
大家在看
|
