使用JQuery的垂直选项卡

时间:2016-03-01 14:54:31

标签: javascript jquery html css

我正在尝试使用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>

我已成功实施水平制表符,并以相同的方式进行垂直制作。但是,它似乎不起作用。

0 个答案:

没有答案