我正在尝试使用JQuery实现垂直标签。我已经能够根据需要创建垂直选项卡,但我想为每个选项卡显示的内容都只显示在一个选项卡中。这是我创造的小提琴 -
https://jsfiddle.net/z5uq0ppd/
代码就是这样 -
$(function() {
$("#Configuration").tabs();
});
.side-tabs {
float: left;
width: 20%;
height: 100%;
border: 1px solid black;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.side-tabs:after {
display: block;
clear: both;
content: '';
background-color: #333;
}
.side-tabs li {
float: left;
}
.side-tabs a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.side-tabs a:hover {
background-color: #4CAF50;
}
<div id="Configuration" style="width:100%;height:100%">
<div class="side-tabs">
<ul>
<li class="active" id="09"><a href="#ConfigurationPage">Home</a></li>
<li id="10"><a href="#addChannelPage">Add Channel</a></li>
<li id="11"><a href="addDevicePage">Add Device</a></li>
<li id="12"><a href="addDeviceTypePage">Add Device Type</a></li>
<li id="13"><a href="DisplayDeviceTreePage">Display Device Tree</a></li>
</ul>
</div>
<div style="float:right;width:78%;height:100%; border:1px solid black;">
<div id="ConfigurationPage" style="padding:10px; width:100%; height:100%;">Welcome to Configurations.</div>
<div id="addDevicePage" style="padding:10px; width:100%; height:100%;">Add Device Page.</div>
<div id="addChannelPage" style="padding:10px; width:100%; height:100%;">Add Channel Page.</div>
<div id="addDeviceTypePage" style="padding:10px; width:100%; height:100%;">Add Device Type page.</div>
<div id="DisplayDeviceTreePage" style="padding:10px; width:100%; height:100%;">Device Tree</div>
</div>
</div>
我已成功实施水平制表符,并以相同的方式进行垂直制作。但是,它似乎不起作用。