【发布时间】：2017-08-16 22:26:06
【问题描述】：
我试图在 Web 表单 asp.net C# 的同一页面上创建一个带有导航栏的菜单选项卡。带有文本“主页”的第一个选项卡有效，但带有文本“学习设置”的第三个选项卡不起作用。以下是内容页面的 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>
【问题讨论】：
-
第一个带有“Home”文本的选项卡有效，但第三个带有“Study Setup”文本的选项卡不起作用？其实是什么问题？
-
“学习设置”不起作用？研究设置选项卡上到底有哪些不起作用？
-
标签在屏幕左侧是水平的而不是垂直的，就像“主页”标签页标签一样。
标签： javascript c# jquery html css