jQuery UI标签页，左侧具有导航栏

Question

I have attempted to create a menu tab with a nav bar on the same page in a web form asp.net C#. The first tab with text "Home" works but the third tab with text "Study Setup" does not work. Below is the HTML from the content page. The Jquery UI library is used. Any advice is appreciated. Thanks.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="TestTabs.aspx.cs" Inherits="ImageTableEditorNew.TestTabs" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.1/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.11.3.js"></script>

  <script src="//code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>
    <style>
#tabs-left{
        position:relative;
        padding-left: 6.5em;
}
#tabs-left2 {
        position:relative;
        padding-left: 6.5em;
}
#tabs-left .ui-tabs-nav
 {
    position: absolute;
    left: 0.25em;
    top: 0.25em;
    bottom: 0.25em;
    width: 9em;
    padding: 0.2em 0 0.2em 0.2em;
}
#tabs-left2 .ui-tabs-nav2
 {
    position: absolute;
    left: 0.25em;
    top: 0.25em;
    bottom: 0.25em;
    width: 9em;
    padding: 0.2em 0 0.2em 0.2em;
}
#tabs-left .ui-tabs-nav li
 {
    right: 1px;
    width: 100%;
    border-right: none;
    border-bottom-width: 1px !important;
    -moz-border-radius: 4px 0px 0px 4px;
    -webkit-border-radius: 4px 0px  0px 4px;
    border-radius: 4px 0px 0px 4px;
    overflow: hidden;
}
#tabs-left2 .ui-tabs-nav2 li
 {
    right: 1px;
    width: 100%;
    border-right: none;
    border-bottom-width: 1px !important;
    -moz-border-radius: 4px 0px 0px 4px;
    -webkit-border-radius: 4px 0px  0px 4px;
    border-radius: 4px 0px 0px 4px;
    overflow: hidden;
}
#tabs-left .ui-tabs-nav li.ui-tabs_selected,
#tabs-left .ui-tabs-nav li.ui-state-active
 {
    border-right: 1px solid transparent;
}
#tabs-left2 .ui-tabs-nav2 li.ui-tabs_selected,
#tabs-left2 .ui-tabs-nav2 li.ui-state-active

 {
    border-right: 1px solid transparent;
}
#tabs-left .ui-tabs-nav li a
 {
    float: right;
    width: 100%;
    text-align: right;
}
#tabs-left2 .ui-tabs-nav2 li a
 {
    float: right;
    width: 100%;
    text-align: right;
}
#tabs-left .ui-tabs-panel
{
    height: 40em;
}
 #tabs-left2 .ui-tabs-panel
{
    height: 40em;
}
#nested-tabs-1, #nested-tabs-2, #nested-tabs-3, #nested-tabs-4, #nested-tabs-5, #nested-tabs-6, #nested-tabs-7, #nested-tabs-8 {
    margin-left:100px;
}
 </style>

    <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Home</a></li>
    <li><a href="#tabs-2">Users</a></li>
    <li><a href="#tabs-3">Study Setup</a></li>
    <li><a href="#tabs-4">Reports</a></li>
    <li><a href="#tabs-5">Quality Control</a></li>
  </ul>
  <div id="tabs-1">
      <div id="tabs-left">
          <ul id="ui-tabs-nav">
              <li><a href="#nested-tabs-1">Study</a></li>
              <li><a href="#nested-tabs-2">Re-Reads</a></li>
              <li><a href="#nested-tabs-3">QC Failures</a></li>
              <li><a href="#nested-tabs-4">Waiting for QC</a></li>
              <li><a href="#nested-tabs-5">Deleted</a></li>
          </ul>
          <div id="nested-tabs-1">BGS data here</div>
          <div id="nested-tabs-2"><p>More content here...</p></div>
          <div id="nested-tabs-3"><p>More content here...</p></div>
          <div id="nested-tabs-4"><p>More content here...</p></div>
          <div id="nested-tabs-5"><p>More content here...</p></div>
      </div>
  </div>
  <div id="tabs-2">
      Users grid here
  </div>
      <div id="tabs-3">
      <div id="tabs-left2">
          <ul id="ui-tabs-nav2">
              <li><a href="#nested-tabs-6">Study Users</a></li>
              <li><a href="#nested-tabs-7">Study Settings</a></li>
              <li><a href="#nested-tabs-8">Redundant Data Drops</a></li>
          </ul>
          <div id="nested-tabs-6">Study User Table data here
              </div>
              <div id="nested-tabs-7">study code table here</div>
          <div id="nested-tabs-8">
              folders here
          </div>
      </div>
  </div>
    <div id="tabs-4">
        report page goes here
    </div>
    <div id="tabs-5">
        QC page goes here
    </div>
 </div>


              <script>
$(function() {
    $( "#tabs" ).tabs();
    $("#tabs-left").tabs();
    $("#tabs-left2").tabs();

});

                  </script>
</asp:Content>

Answer 1

You should really gone through class selector concept. There was some simple mistake you have not added css for that menu. As you are using id selector you need to copy paste same css for another id. Instead of that use class selector.

 .tabs-left { position: relative; padding-left: 6.5em; } .tabs-left .ui-tabs-nav { position: absolute; left: 0.25em; top: 0.25em; bottom: 0.25em; width: 9em; padding: 0.2em 0 0.2em 0.2em; } .tabs-left .ui-tabs-nav li { right: 1px; width: 100%; border-right: none; border-bottom-width: 1px !important; -moz-border-radius: 4px 0px 0px 4px; -webkit-border-radius: 4px 0px 0px 4px; border-radius: 4px 0px 0px 4px; overflow: hidden; } .tabs-left .ui-tabs-nav li.ui-tabs_selected, .tabs-left .ui-tabs-nav li.ui-state-active { border-right: 1px solid transparent; } .tabs-left .ui-tabs-panel { height: 40em; } .nested-tabs { margin-left: 150px; } 

 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="TestTabs.aspx.cs" Inherits="ImageTableEditorNew.TestTabs" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0-rc.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.11.3.js"></script> <script src="//code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script> <div id="tabs"> <ul> <li><a href="#tabs-1">Home</a></li> <li><a href="#tabs-2">Users</a></li> <li><a href="#tabs-3">Study Setup</a></li> <li><a href="#tabs-4">Reports</a></li> <li><a href="#tabs-5">Quality Control</a></li> </ul> <div id="tabs-1"> <div id="tabs-left" class="tabs-left"> <ul id="ui-tabs-nav" class="ui-tabs-nav"> <li><a href="#nested-tabs-1">Study</a></li> <li><a href="#nested-tabs-2">Re-Reads</a></li> <li><a href="#nested-tabs-3">QC Failures</a></li> <li><a href="#nested-tabs-4">Waiting for QC</a></li> <li><a href="#nested-tabs-5">Deleted</a></li> </ul> <div class="nested-tabs" id="nested-tabs-1">BGS data here</div> <div class="nested-tabs" id="nested-tabs-2"> <p>More content here...</p> </div> <div class="nested-tabs" id="nested-tabs-3"> <p>More content here...</p> </div> <div class="nested-tabs" id="nested-tabs-4"> <p>More content here...</p> </div> <div class="nested-tabs" id="nested-tabs-5"> <p>More content here...</p> </div> </div> </div> <div id="tabs-2"> Users grid here </div> <div id="tabs-3"> <div class="tabs-left" id="tabs-left2"> <ul class="ui-tabs-nav" id="ui-tabs-nav2"> <li><a href="#nested-tabs-6">Study Users</a></li> <li><a href="#nested-tabs-7">Study Settings</a></li> <li><a href="#nested-tabs-8">Redundant Data Drops</a></li> </ul> <div class="nested-tabs" id="nested-tabs-6">Study User Table data here </div> <div class="nested-tabs" id="nested-tabs-7">study code table here</div> <div class="nested-tabs" id="nested-tabs-8"> folders here </div> </div> </div> <div id="tabs-4"> report page goes here </div> <div id="tabs-5"> QC page goes here </div> </div> <script> $(function() { $("#tabs").tabs(); $(".tabs-left").tabs(); }); </script> </asp:Content>