再一次,我有一个关于jQuery的问题,但我正在尽力学习,但有时候教程并没有给我所需的一切。
我正在努力使一组标签工作,但是,似乎没有任何工作......
这是我正在使用的代码:
HTML:
<!-- TAB SECTION -->
<div id="tab_container">
<ul id="tab_list">
<li><a class="how_on" href="#how">How</a></li>
<li><a class="why" href="#why">Why</a></li>
<li><a class="what" href="#what">What</a></li>
<li><a class="who" href="#who">Who</a></li>
<li><a class="when" href="#when">When</a></li>
</ul>
<img src="images/tab_top.jpg" width="864px" height="6px" alt="" border="0" />
</div>
<!-- HOW -->
<div class="tabs">
<div class="tab" id="how">
<p><strong>HOW IT WORKS:</strong></p>
</div>
<!-- WHY -->
<div class="tab" id="why">
<p><strong>WHY:</strong></p>
</div>
</div>
CSS:
#tab_container
{
color: #FFFFFF;
background-color: transparent;
height: 35px;
width: 864px;
margin: 14px 0 0 0;
display: block;
float: left;
overflow: hidden;
}
ul#tab_list
{
width: 683px;
height: 29px;
padding: 0;
margin: 0;
display: inline;
overflow: hidden;
list-style-type: none;
}
ul#tab_list li
{
margin: 0;
padding: 0;
display: inline;
}
.how,
a.how:link,
a.how:visited,
a.how_on
{
float: left;
display: inline;
width: 135px;
height: 29px;
margin: 0;
text-decoration: none;
text-indent: -99999px;
overflow: hidden;
}
a.how:visited, a.how:link, a.how:hover
{
background-image: url("../images/how_tab.jpg");
background-position: 0 -58px;
}
a.how_on
{
background-image: url("../images/how_tab.jpg");
background-position: 0 -29px;
}
.tabs
{
color: #000;
background-color: #f3f9fb;
width: 836px;
margin: 0;
padding: 0px 14px 6px 14px;
display: inline;
overflow: hidden;
float: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
}
JQUERY:
jQuery(document).ready(function(){
//if this is not the first tab, hide it
jQuery(".tab:not(:first)").hide();
//to fix u know who
jQuery(".tab:first").show();
//when we click one of the tabs
jQuery("#tab_list a").click(function(){
//get the ID of the element we need to show
stringref = jQuery(this).attr("href").split('#')[1];
//hide the tabs that doesn't match the ID
jQuery('.tab:not(#'+stringref+')').hide();
//fix
if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
jQuery('.tab#' + stringref).show();
}
else
//display our tab fading it in
jQuery('.tab#' + stringref).fadeIn();
//stay with me
return false;
});
});
只是想提前感谢您的帮助。
答案 0 :(得分:2)
我可以看到代码没有完全实现,所以我只是指出一个明显的我认为是错字。
jQuery(".tab_list a") //now
jQuery("#tab_list a") //should be