jquery中的垂直制表符答案

【问题标题】：Vertical tabs in jqueryjquery中的垂直制表符
【发布时间】：2016-03-29 11:51:58
【问题描述】：

我正在尝试垂直显示选项卡。但我根本看不到这种风格。这是代码。

HTML

<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="vertical.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script src="vertical.js"></script>

<div id="tabs">
    <ul>
        <li><a href="#a">Tab A</a></li>
        <li><a href="#b">Tab B</a></li>
        <li><a href="#c">Tab C</a></li>
        <li><a href="#d">Tab D</a></li>
    </ul>

    <div id="a">Content of A</div>
    <div id="b">Content of B</div>
    <div id="c">Content of C</div>
    <div id="d">Content of D</div>
</div>

以下是 Javascript 代码。垂直.js

JAVASCRIPT

 $('#tabs')
    .tabs()
    .addClass('ui-tabs-vertical ui-helper-clearfix');

CSSvertical.css

.ui-tabs.ui-tabs-vertical {
  padding: 0;
  width: 42em;
}

.ui-tabs.ui-tabs-vertical .ui-widget-header {
  border: none;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav {
  float: left;
  width: 10em;
  background: #CCC;
  border-radius: 4px 0 0 4px;
  border-right: 1px solid gray;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li {
  clear: left;
  width: 100%;
  margin: 0.2em 0;
  border: 1px solid gray;
  border-width: 1px 0 1px 1px;
  border-radius: 4px 0 0 4px;
  overflow: hidden;
  position: relative;
  right: -2px;
  z-index: 2;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a {
  display: block;
  width: 100%;
  padding: 0.6em 1em;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li a:hover {
  cursor: pointer;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: 0.2em;
  padding-bottom: 0;
  border-right: 1px solid white;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-nav li:last-child {
  margin-bottom: 10px;
}

.ui-tabs.ui-tabs-vertical .ui-tabs-panel {
  float: left;
  width: 28em;
  border-left: 1px solid gray;
  border-radius: 0;
  position: relative;
  left: -1px;
}

我错过了什么？顶部脚本的顺序应该是什么？有人可以帮忙吗，TIA。

[]

【问题讨论】：

它运行良好。 jsfiddle.net/sureshponnukalai/wf62m6mo
试试这个代码jqueryui.com/tabs/#vertical
@SureshPonnukalai 当我在浏览器中尝试时，选项卡仅与公告一起显示。（我只从小提琴得到代码）
@sahana: 这意味着你的 CSS 没有加载。检查网络选项卡（在开发者控制台中）以查看资源是否正确加载或给出 404。
控制台显示“ReferenceError: $ is not defined”！

标签： jquery css jquery-ui-tabs

【解决方案1】：

终于找到了罪魁祸首。这只是我在顶部提到的文件顺序。下面是顺序！

  <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <script src="vertical.js"></script>
    <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="vertical.css" rel="stylesheet" type="text/css" />

感谢大家的认真投入。这对我帮助很大。

【讨论】：