Question

我正在尝试使用给定here的示例创建JQueryUI Vertical标签。

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样式时，标签正常工作，但它们显示为HORIZONTALLY。

所以我将这些样式复制到styles.css ，并将此CSS文件包含在我的页面的<head>标记中。结果，标签Do显示为垂直，但它们不再工作。 也就是说，点击标题页后不会显示其内容。

问题是为什么以及如何解决这个问题？

Answer 1

点击文字时它正在工作，因为它不是li的内容全宽

li a获取默认的css，因此您需要覆盖此内容：

.ui-tabs .ui-tabs-nav .ui-tabs-anchor{
    display: block;
    float:none !important
}

工作演示：https://jsfiddle.net/op22ezxe/1/

JQueryUI Vertical选项卡 - 在添加了一些（显然不相关的）CSS样式之后，JS for tabs功能停止了工作

1 个答案: