我遇到了一些Javascript的问题，我曾经用它制作了一个带标签的框。
问题在于，每当我点击不同的标签页时，网页都会因为看似没有理由而大幅跳跃。据我所知，如果内容在点击之间缩小，则不会触及网页的底部。
任何人都可以在代码可能出错的地方提供一些帮助吗？
此外，是否可以制作可点击的标签图像？当我尝试使用img标签时，它会破坏我的代码......
谢谢！
使用Javascript：
$(document).ready(function(){
var activeTabIndex = -1;
var tabNames = ["tab1","tab2","tab3"];
$(".tab-menu > li").click(function(e){
for(var i=0;i<tabNames.length;i++) {
if(e.target.id == tabNames[i]) {
activeTabIndex = i;
} else {
$("#"+tabNames[i]).removeClass("active");
$("#"+tabNames[i]+"-tab").css("display", "none");
}
}
$("#"+tabNames[activeTabIndex]+"-tab").fadeIn();
$("#"+tabNames[activeTabIndex]).addClass("active");
return false;
});
});
CSS（如果需要）：
body{
background: #fff;
margin:0;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a {
text-decoration: none;
}
#tab-container{
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 14px;
line-height:16px;
margin: auto;
width: 700px;
border:0px solid #ccc;
background:#e1eff8;
padding-left: 0px;
padding-top:10px;
padding-bottom:13px;
-moz-box-shadow: inset 0 -15px 2px #dadada;
-webkit-box-shadow:inset 0 -20px 2px #dadada;
box-shadow: inset 0-5px 10px #dadada;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#tab-container ul{
list-style: none;
width: 100%;
}
#tab-container ul.tab-menu li{
display: block;
float: left;
position: relative;
font-weight: 700;
padding: 10px 20px 10px 20px;
background: #eee;
border: 1px solid #ddc;
border-bottom: none;
border-width: 1px;
color: #999;
cursor: default;
height: 14px;
margin-bottom: -1px;
margin-right: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#tab-container ul.tab-menu li.active{
background: #fff;
color: #0088CC;
height: 15px;
border-bottom: 0;
background: -moz-linear-gradient(top, #ebebeb, white 10%);
background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white));
}
.tab-top-border {
border-bottom: 0px solid #d0ccc9;
}
.tab-content{
margin: auto;
background: #efefef;
background: #fff;
border: 1px solid #ddc;
border-top-style: none;
text-align: left;
padding: 10px;
padding-bottom: 20px;
padding-left: 25px;
padding-right: 25px;
font-size: 13px;
display: none;
height: auto;
-moz-box-shadow: inset 0 -2px 2px #dadada;
-webkit-box-shadow:inset 0 -2px 2px #dadada;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#tab-container div.active{
display: block;
}
.tab-content h1{
line-height: 1em;
height: 28px;
font-size: 22px;
}
HTML：
<br>
<img alt="TIGER Grant - Web Header.jpg" style="" src="/images/pages/N757/TIGER%20Grant%20-%20Web%20Header.jpg"><br>
<br>
<p>Each year, the area welcomes over 5.7 million visitors to the sugar whites sands and emerald waters along its beaches. The recognizes the importance of a clean, healthy environment to our economy and way of life. In an effort to protect our natural resources, the has launched to develop, enhance, and promote projects and initiatives aimed at raising environmental awareness, reducing waste, increasing livability, and improving sustainability in the community.<br>
<br>
<span class="Subhead2">Program Overview</span></p>
<img alt="TIGER Grant" style="width: 300px; height: 210px; float: right;" src="http://www.blank.gov/images/pages/N757/TIGER%20Web%20Logo.jpg">
<p>Green Up is an education-based environmental awareness campaign designed to reach the residents of and visitors to. The program will seek to address environmental concerns and issues that affect the region by disseminating critical information via signage, special events, website/social media, news releases, and other promotional methods to the public. </p>
<p>Green Up will advance the Core Values identified within the including:</p>
<ul>
<li>We protect and enhance the quality of life for our residents, visitors, and retirees.</li>
<li>We protect and preserve our unique natural resources.</li>
<li>We embed sustainability into the fabric of the community.</li>
</ul>
<br>
<div id="tab-container">
<ul class="tab-menu">
<li id="tab1" class="active">Project Benefits</li>
<li id="tab2">Project Support</li>
<li id="tab3">Project Documents</li>
</ul>
<div class="clear"></div>
<div class="tab-top-border"></div>
<div id="tab1-tab" class="tab-content active">
<p> </p>
<li> Provide bicycle and pedestrian access throughout the District and across the Waterway.</li>
<li> Provide needed vehicular, bicycle, and pedestrian access.</li>
<li> Improvements will promote investment, economic development, and job creation throughout area.</li>
<li> Proposed improvements to provide additional evacuation route connectivity to improve evacuation time during natural disasters.</li>
<li> Economic development within will create a sustainable and vibrant economic center that is resilient and will withstand the natural and man-made disasters that occur along.</li>
<p><br />
</p>
</div>
<div id="tab2-tab" class="tab-content">
<p>Project has generated tremendous support from many in our local community to our statewide partners and even from our leadership in Washington D.C.<br>
<br>
<span class="Subhead2">Federal Support</span></p>
<ul>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Congressman</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Senate</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Senate</a></li>
</ul>
<span class="Subhead2"><br>
State Support</span><br>
<ul>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Governor</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Foundation</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Transportation</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Lieutenant</a></li>
<li><a class="Hyperlink" target="_self" href="/DocumentCenter/View/">Representative</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Senator</a></li>
</ul>
<span class="Subhead2"><br>
Local Support</span><br>
<ul>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Commission</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Blank</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Project</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Center</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Blank</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Farms</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Tourism</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">County</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Blank</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Blank</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Chamber</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">House</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Probate</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Blank</a></li>
</ul>
<p><br />
</p>
</div>
<div id="tab3-tab" class="tab-content">
<p>
<span class="Subhead2">Project</span></p>
<ul>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/"><span class="Hyperlink">Project<br>
</span></a></li>
<li><span class="Hyperlink"><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Project</a><br>
</span></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/"><span class="Hyperlink">Analysis<br>
</span></a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/"><span class="Hyperlink">Certification<br>
</span></a></li>
</ul>
<span class="Subhead2"><br>
Supporting Documents</span><br>
<ul>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/"><span class="Hyperlink">Plan<br>
</span></a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/"><span class="Hyperlink">Blank<br>
</span></a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Plan</a></li>
<li><a class="Hyperlink" target="_blank" href="/DocumentCenter/View/">Sustainability</a></li>
</ul>
<p><br />
</p>
</div>
</div>