隠しテーブルとして構造化されたページがあります（divのみを使用してみましたが、私には適していません）..そして、2番目のセル（Aと呼びましょう）にリンクがあり、最初のセル（と呼びましょう）のリンクを呼び出しますB) SECOND セル (A の下の段落) の下の div セクションをすべて同じ行内で呼び出します。
すべてうまくいっていますが、A を押すと、B リンクは正常に表示されますが、ページが上に移動します..B を非表示にするボタンを押すと、ページが元の場所に戻ります..
私はこれについて多くのことを検索しました..答えのほとんどはスクロールに関するものでした..念のためにそれを行いました(私の問題は左右ではなく上下にシフトすることですが)..しかし、私はまだ問題を抱えています..
何か提案はありますか？
高度なありがとう..
更新：私は本当にたくさんの調査をしました..しかし、私が直面している問題に誰も直面していないようです..さらに、私は2日間コードを操作しようとしました..誤解しないでください:(
メインテーブル:
.myTable
{
width: 100%;
max-width: 1000px;
float : left;
table-layout: auto;
overflow: hidden;
/*border: 1px solid black; */
}
/*.myTable td {
border-width: 2px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
-moz-border-radius: ;
overflow: hidden;
} */
.myCenter
{
width: 90%;
}
.tLeft
{
width: 150px;
}
.myLeft
{
text-align:left; /* This is only if you want the tab items at the center */
padding: 0;
margin: 0;
vertical-align: bottom; /*
position:relative;
top: 100px;
left: 0; */
visibility: hidden;display: none;
/*left:5px;
border: 3px solid green; */
}
.myLeft:target
{
text-align:left; /* This is only if you want the tab items at the center */
padding: 0;
margin: 0;
vertical-align: bottom;
width: 150px;
display: block;
visibility:visible;
float:left; /* no such thing as float center !!!*/
position:relative;
top: 0px;
left: -43px;
/*left:5px;
/*border: 1px solid green;*/
}
.myLeft > ul.menuLeft
{
list-style-type:none;
display:block; /* Change this to block or inline for non-center alignment */
float: left;
vertical-align: bottom;
/*border: 1px solid red;*/
}
.myLeft > ul.menuLeft > li > a
{
color: #580000; /* #7a7883; /* tabs titles */
text-decoration:none;
display:block;
text-align:center;
border:1px solid grey; /* #3333FF border of the tabs */
margin:2px;
width: 150px; /* Width of the tabs */
font-size:15px;
font-family:"Times New Roman", Times, serif;
border-top-left-radius:5px;
border-top-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-moz-user-select:none;
cursor:hand;
}
.myLeft > ul.menuLeft > li > a:hover
{
color: white;
cursor:hand;
}
.myLeft > ul.menuLeft > li > a:focus
{
color: #f5f9fc;
}
.myLeft > ul.menuLeft > li:target > a
{
cursor:default;
...
}
.myLeft > ul.menuLeft > li:target > div
{
display:block;
}
タブ:
.tabs
{
position:relative;
left: 0px;
text-align:left; /* This is only if you want the tab items at the center */
width: 100%;
padding: 0;
margin: 0;
/*border: 1px solid green;*/
}
.tabs ul.menu
{
list-style-type:none;
display:inline; /* Change this to block or inline for non-center alignment */
/* width:570px;
/* min-width:570px;
max-width:800px;
vertical-align: bottom;
/*border: 1px solid red;*/
}
.tabs ul.menu > li
{
display:inline;
float:none; /* no such thing as float center !!!*/
vertical-align: bottom;
/** border: 1px solid yellow;
cursor:hand; */
}
.tabs > ul.menu > li > a
{
color: #580000; /* #7a7883; /* tabs titles */
text-decoration:none;
display:inline-block;
text-align:center;
border:1px solid #f1f3f4; /* #3333FF border of the tabs */
padding:5px 10px 5px 10px;
/*width: 25%;*/ /* Width of the tabs */
font-size:15px;
font-family:"Times New Roman", Times, serif;
border-top-left-radius:5px; -moz-border-radius-topleft:4px; -webkit-border-top-left-radius:5px;
border-top-right-radius:5px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:5px;
-moz-user-select:none;
cursor:hand;
/* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#3333FF));
/* Safari 5.1, Chrome 10+ */ background: -webkit-linear-gradient(top, #3333FF, #fff); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, #3333FF, #fff);
/* IE 10 */ background: -ms-linear-gradient(top, #3333FF, #fff); /* Opera 11.10+ */ background: -o-linear-gradient(top, #3333FF, #fff);
}
.tabs ul.menu > li > a:hover
{
color: white;
cursor:hand;
}
.tabs ul.menu li > div
{
display:none;
position:absolute;
width:98%;
/* max-width:700px;
min-height:230px; */
left:0;
margin: 0 15px 0 15px;
text-align:left;
padding:0;
}
/*.tabs ul.menu > li > div > p
{
border:1px solid #f1f3f4;
background-color: #f5f9fc;
width: 99%;
padding:10px;
margin:0;
color: #65636e;
font-size:12px;
font-family:"Times New Roman", Times, serif;
text-decoration: none;
min-height:200px;
} */
.tabs ul.menu > li > a:focus
{
color: #f5f9fc;
}
.tabs ul.menu > li:target > a
{
cursor:default;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f3f4), to(#8A0808));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #8A0808, #f1f3f4);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #8A0808, #f1f3f4);
/* IE 10 */
background: -ms-linear-gradient(top, #8A0808, #f1f3f4);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #8A0808, #f1f3f4);
}
.tabs ul.menu li:target > div
{
display:block;
}
コンテンツ：
<!-- content -->
<div class="content" style="height:350px; width:760px; ">
<div class="tabs" style="height:390px;"> <!-- Tabs -->
<ul class="menu">
<li id="item-1"> <!-- item-1 -->
<a href="#left-1">Meetings</a> <!-- #f5f9fc -->
<div style="display:block; border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;">
<h3 class="insideh"> Welcome </h3>
<p class="cl" style="font-size:18px; font-style: italic; padding: 5px 20px 5px 20px; ">
Welcome welcome welcome <br>
Please, enjoy the site and feel free to send us any comments you have.<br><br> Thank you..
</p>
</div> <!-- End of Welcome Div -->
<div style=" border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;" id="#item-1"> <!-- 222 -->
<div class="col" style="width:700px; display:inline; "> <!-- 111 -->
<ul>
<li> <a class="alLink" href="aec2009.php">Meetings 2009</a> </li>
<li> <a class="alLink" href="aec2010.php">Meetings 2010</a> </li>
<li> <a class="alLink" href="aec2011.php">Meetings 2011</a> </li>
<li> <a class="alLink" href="aec2012.php">Meetings 2012</a> </li>
<li> <a class="alLink" href="aec2013.php">Meetings 2013</a> </li>
<li> <a class="alLink" href="">Miscellaneous</a> </li>
</ul>
</div> <!-- /111 -->
</div> <!-- end of Content #1 --> <!-- /222 -->
</li> <!-- end of item-1 -->
<li id="item-2">
<a href="#left-2">Educational Materials</a>
<div style="border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;" id="#item-2"> <!-- 222 -->
<div class="col" style="width:700px; display:inline;"> <!-- 111 -->
<ul>
<li> <a class="alLink" href="aec2009.php">Our Books</a> </li>
<ul>
<li> <a class="alLink" href="aec2009.php"> Books</a> </li>
<li> <a class="alLink" href="aec2010.php"> Society</a> </li>
<li> <a class="alLink" href="aec2011.php">Guidlines</a> </li>
</ul>
<li> <a class="alLink" href="aec2010.php"> Society</a> </li>
<li> <a class="alLink" href="aec2011.php">Guidlines</a> </li>
</ul>
</div> <!-- /111 -->
</div> <!-- end of Content #2 --> <!-- /222 -->
</li> <!-- end of item-2 -->
<li id="item-3">
<a href="#item-3">Event Calender 2013</a>
<div style="border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;" id="#item-3"> <!-- 111 -->
<div class="col">
<h3 class="insideh"> Date </h3> <p class="cl" style="font-size:16px;">
Jan 12th, 2013 <br>
Apr 30th, 2013 <br>
Jul 10th, 2013 <br> </p>
</div>
<div class="col">
<h3 class="insideh"> Topics </h3> <p class="cl" style="font-size:16px;">
</p>
</div>
</div> <!-- end of Content #3 --> <!-- /111 -->
</li> <!-- end of item-3 -->
<li id="item-4">
<a href="#item-4">AEC Members</a>
<div style="border:1px solid #f1f3f4; background-color: #3333FF; padding:10px; margin:0; height:310px;" id="#item-4"> <!-- 111 -->
<h3 class="insideh"> Our Speaker Members </h3>
</div> <!-- end of Content #4 --> <!-- /111 -->
</li> <!-- end of item-4 -->
<li id="item-5">
<a href="#item-5">Gallery</a>
<div style="border:1px solid #f1f3f4; background-color: #3333FF; width: 99%; padding:10px; margin:0; height:310px;" id="#item-5"> <!-- 111 -->
<!--<?php /*include("gal1.html"); */?> -->
</div> <!-- end of Content #5 --> <!-- /111 -->
</li> <!-- end of item-5 -->
</ul>
</div> <!-- end of Tabs -->
</div> <!-- end of content -->
インデックス:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<meta name="viewport" content="width=device-width, maximum-scale=2.0" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />
<link href="css/tabs.css" rel="stylesheet" type="text/css" />
<link href="css/buttons.css" rel="stylesheet" type="text/css" />
<link href="css/tables.css" rel="stylesheet" type="text/css" />
<?php include 'counter.php' ?>
<title>The Echo Club</title>
<LINK REL="SHORTCUT ICON" HREF="/imgs/icon.png" />
</head>
<body style= "overflow: scroll;">
<table class = "myTable">
<tr> <!-- first row ****** Header SECTION ****** -->
<?php include("htmls/header.html"); ?>
</tr> <!-- *** End of first row *** -->
<tr> <!-- second row ****** Top NAVIGATION ******-->
<td colspan = '3'> <!-- 2-first column -->
<?php $page = 1; include("htmls/topnav.html"); ?>
</td> <!-- End of 1-first col -->
<!--<td> <!-- 2-second col ->
</td> <!-- End of 1-second col ->
<td> <!-- 2-third col ->
</td> <!-- End of 2-third col -->
</tr> <!-- *** End of second row *** -->
<tr> <!-- third row ****** Search SECTION ******-->
<td> <!-- 3-first column -->
<div class="myLeft" style="height:300px; width: 150px;"><ul class="menuLeft">
<li> </li> </ul> </div>
</td> <!-- End of 3-first col -->
<!--<td> <!-- 3-second col ->
</td> <!-- End of 3-second col -->
<td colspan="2"> <!-- 3-third col -->
<?php include("htmls/search.html"); ?>
</td> <!-- End of 3-third col -->
</tr> <!-- *** End of second row *** -->
<tr> <!-- fourth row ****** Main SECTION ******-->
<td> <!-- 4-first column -->
<?php include("htmls/leftNav.html"); ?>
</td> <!-- End of 4-first col -->
<td class="myCenter"> <!-- 4-second col -->
<?php include("htmls/content.html"); ?>
</td> <!-- End of 4-second col -->
<td> <!-- 4-third col -->
<!-- <iframe style="width:170px; height:300px; margin: 0 1% 0 1%;" frameborder="1" allowfullscreen></iframe> -->
<img src="imgs/myAD.jpg" />
<?php include("htmls/newsLetters.html"); ?>
</td> <!-- End of 4-third col -->
</tr> <!-- *** End of fourth row *** -->
<tr> <!-- fifth row ****** Sociel Network SECTION ******-->
<td> <!-- 5-first column -->
</td> <!-- End of 5-first col -->
<td> <!-- 5-second col -->
<?php include("htmls/social.html"); ?>
</td> <!-- End of 5-second col -->
<td> <!-- 5-third col -->
</td> <!-- End of 5-third col -->
</tr> <!-- *** End of fifth row *** -->
<tr> <!-- sixth row ****** Footer SECTION ******-->
<!--<td> <!-- 6-first column ->
</td> <!-- End of 6-first col -->
<td class="myCenter" colspan = '3'> <!-- 6-second col -->
<?php include("htmls/footer.html"); ?>
</td> <!-- End of 6-second col -->
<!--<td><!-- 6-third col ->
</td> <!-- End of 6-third col -->
</tr> <!-- *** End of sixth row *** -->
</table>
</body>
</html>