0
我試圖創建一個菜單選項卡與導航欄在同一個頁面上的網頁形式的asp.net C＃。帶有文本「Home」的第一個選項卡可用，但帶有「Study Setup」文本的第三個選項卡不起作用。以下是內容頁面中的HTML。使用Jquery UI庫。任何建議表示讚賞。謝謝。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>
與文字「家」的作品，但用文字「研究設置」的第三個選項卡第一個選項卡不工作？其實最新的問題是什麼？ – Omi
「學習設置」不起作用？ 「研究設置」選項卡上不起作用的是什麼？ –
屏幕左側的標籤是水平的而不是垂直的，就像「主頁」標籤頁標籤一樣。 – Edward