jquery ui标签页左侧有导航栏

时间：2017-08-16 22:26:06

标签： javascript c# jquery html css

我试图在网页表单asp.net C＃中的同一页面上创建一个带有导航栏的菜单选项卡。带有文本“Home”的第一个选项卡有效，但带有文本“Study Setup”的第三个选项卡不起作用。以下是内容页面中的HTML。使用Jquery UI库。任何建议表示赞赏。感谢。

<%@ 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>

1 个答案:

答案 0 :(得分：0)

你应该真正通过class选择器概念。有一些简单的错误，你没有为该菜单添加css。当你使用id选择器时，你需要复制粘贴相同的css为另一个id。而不是使用class选择器。 

.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>

相关问题
最新问题