文章/答案/技术大牛

发布

社区首页 >问答首页 >使用JQuery的垂直选项卡？

问使用JQuery的垂直选项卡？
EN

Stack Overflow用户

提问于 2009-04-21 15:09:34

回答 8查看 135.7K关注 0票数 80

我希望标签沿页面的左侧，而不是横跨顶部。我已经出于其他原因(效果)加载了jQuery，所以我更喜欢使用jQuery而不是其他UI框架。搜索“垂直标签jquery”可以找到正在进行的工作的链接。

让垂直标签跨浏览器工作是不是很麻烦，或者它是如此琐碎，以至于一旦你有了解决方案，似乎就不值得发布示例代码了？

jquery-ui

javascript

jquery

回答 8

Stack Overflow用户

发布于 2009-10-06 19:10:17

看看the jQuery UI vertical Tabs Docu吧。我试过了，它工作得很好。

<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style> 

<script>
    $(document).ready(function() {
        $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
        $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');

    });
</script>

票数 49

Stack Overflow用户

发布于 2009-04-21 15:37:39

请在此处尝试：

http://www.sunsean.com/idTabs/

看一下“自由”选项卡，可能会找到您需要的内容。

如果你找到你喜欢的东西，请告诉我。几个月前，我解决了完全相同的问题，并决定实现自己。我喜欢我所做的，但使用标准库可能会更好。

票数 7

Stack Overflow用户

发布于 2009-09-16 19:46:58

我已经创建了一个垂直的菜单和在页面中间变化的标签。我在代码源上更改了两个单词，并将两个不同的div

菜单：

<div class="arrowgreen">
  <ul class="tabNavigation"> 
    <li> <a href="#first" title="Home">Tab 1</a></li>
    <li> <a href="#secund" title="Home">Tab 2</a></li>
  </ul>
</div>

内容：

<div class="pages">
  <div id="first">
    CONTENT 1
  </div>
  <div id="secund">
    CONTENT 2
  </div>
</div>

代码与div分开工作。

$(function () {
    var tabContainers = $('div.pages > div');

    $('div.arrowgreen ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.arrowgreen ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/773074

复制

相似问题

问使用JQuery的垂直选项卡？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JQuery的垂直选项卡？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JQuery的垂直选项卡？
EN