0
Webフォームasp.net C＃の同じページにナビゲーションバーを持つメニュータブを作成しようとしました。 "ホーム"というテキストの最初のタブは機能しますが、 "スタディスタディ"というテキストの3番目のタブは機能しません。以下は、コンテンツページの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>
テキスト「ホーム」作品が、テキスト「研究セットアップ」と3番目のタブを持つ最初のタブは機能しませんか？実際問題は何ですか？ – Omi
"Study Setup"が機能しませんか？ [スタディセットアップ]タブでは正確には機能しません。 –
「ホーム」タブページのタブのように、タブは水平で、画面の左側には垂直ではありません。 – Edward