我正在尝试使用给定的示例创建 JQueryUI 垂直选项卡 here .
the page I have linked 上给出的源代码中有一些 CSS 样式:
.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-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
当我不添加这些 CSS 样式时，选项卡可以正常工作，但它们会水平显示。
所以我将这些样式复制到 styles.css 中，并将此 CSS 文件包含在我页面的 <head> 中标签。因此，选项卡确实会垂直显示，但它们不再起作用。 也就是说，单击选项卡标题不会显示其内容。
问题是为什么以及如何解决这个问题？
最佳答案
当您点击文本时它会起作用，因为它不是 li 的内容全宽
li a 获取默认的 css，所以你需要覆盖它:
.ui-tabs .ui-tabs-nav .ui-tabs-anchor{
display: block;
float:none !important
}
关于javascript - JQueryUI 垂直选项卡 - 添加一些(显然不相关的)CSS 样式后，用于选项卡功能的 JS 停止工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40670845/