我希望标签位于页面左侧而不是顶部。我已经因为其他原因（效果）加载了 jQuery，所以我更喜欢使用 jQuery 而不是另一个 UI 框架。搜索“垂直选项卡 jquery”会产生指向正在进行的工作的链接。
让垂直选项卡跨浏览器工作是否令人担忧，或者它是如此微不足道以至于一旦你有了解决方案，发布示例代码似乎不值得？
JQuery 的垂直标签？
IT技术
javascript
jquery
jquery-ui
2021-02-19 17:46:03
6个回答
看看jQuery UI 垂直标签文档。我试了一下，效果很好。
<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>
在这里试试：
http://www.sunsean.com/idTabs/
查看“自由”选项卡可能会满足您的需求。
如果你找到你喜欢的东西，请告诉我。几个月前我研究了完全相同的问题，并决定自己实现。我喜欢我所做的，但使用标准库可能会很好。
我在页面中间创建了一个垂直菜单和选项卡。我在代码源上改了两个字，我分开了两个不同的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();
});
//o_O\\ (Poker Face) i know its late
只需添加下面的 css 样式
<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>
我不希望垂直标签需要与水平标签不同的 Javascript。唯一不同的是用于在页面上显示选项卡和内容的 CSS。用于选项卡的 JS 通常仅显示/隐藏/可能加载内容。