jquery中的垂直选项卡
我正在尝试垂直显示选项卡。但我一点也看不出它的风格。这是代码 HTMLjquery中的垂直选项卡,jquery,css,jquery-ui-tabs,Jquery,Css,Jquery Ui Tabs,我正在尝试垂直显示选项卡。但我一点也看不出它的风格。这是代码 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> &
<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>
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;
}
我错过了什么?顶部脚本的顺序应该是什么?
有人能帮忙吗,蒂亚
[]终于找到了罪犯。这正是我在顶部提到的文件顺序。 以下是订单
<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" />
感谢大家的认真投入。它真的帮了我很大的忙。它工作得很好。试试下面的代码@SureshPonnukalai当我在浏览器中尝试时,选项卡只显示公告。(我只是从fiddle那里得到代码)@sahana:这意味着你的css没有加载。检查网络选项卡(在开发者控制台中),查看资源是否正确加载或提供404。控制台显示“ReferenceError:$未定义”!
<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" />