jquery ui tabs帮助

时间:2011-02-07 23:01:13

标签: jquery user-interface tabs

为什么使用jquery选项卡UI很难:S ..

我已经下载了它没有主题因为我想自己做,因为我不想要百万的CSS只是为了制作那个标签效果:S。

所以我现在需要使用CSS,所以我可以隐藏内容,当我点击一个链接我应该抄内容..

这就是我现在所拥有的:

<script>
var $tabs = $('#tabs-1').tabs(); // first tab selected

$('#tabs-1').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});
</script>
                <div id="tabs">
                           <ul>
                              <li><a href="#tabs-1">Tab 1</a></li>
                              <li><a href="#tabs-2">Tab 2</a></li>
                              <li><a href="#tabs-3">Tab 3</a></li>
                           </ul>
                           <div id="tabs-1">
                              <p>Tab 1 content</p>
                           </div>
                           <div id="tabs-2">
                              <p>Tab 2 content</p>
                           </div>
                           <div id="tabs-3">
                              <p>Tab 3 content</p>
                           </div>
                        </div><!-- tabs -->

#tabs ul{
    width: 296px;
    float: left;
}

#tabs li {
    float: left;
    width: 95px;
    text-align: center;
}

#tabs-1 {

}

#tabs-2 {
    display: none;
}

#tabs-3 {
    display: none;
}
希望有人可以帮助我解决困惑

1 个答案:

答案 0 :(得分:0)

第一

var $tabs = $('#tabs-1').tabs();

必须是

var $tabs = $('#tabs').tabs();

第二,如果你不下载它们,你必须覆盖或定义css规则

.ui-tabs-hide {
 display:none;   
}

这是你需要的!

这个你不需要al:

$('#tabs-1').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});