jQuery-选项卡-需要一些帮助/指导

再一次，我对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>

#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(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;
 });

});

jQUERY:

     <!-- 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>

#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(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;
 });

});

---

我只是想提前对你的帮助表示感谢

我可以看出代码没有完全实现，所以我只想指出一个明显的问题，我认为这是一个输入错误

jQuery(".tab_list a") //now
jQuery("#tab_list a") //should be

---

你为什么不使用jQueryUI选项卡？我不知道这个，它看起来很酷，很容易实现吗？你以前用过这个吗？是的，你可以称之为使用jQuery的开发人员/设计师的“事实”选项卡实现。我尝试过这个，但你无法摆脱它已经为你提供的主题，这让它对我来说毫无用处。我将继续努力使上述内容发挥作用，或者只编写自己的jquery。。但这没有意义，它应该显示第一个选项卡，隐藏其余选项卡，然后在ID匹配时单击显示。。我不明白为什么它根本不起作用。哇，我觉得自己像个白痴，但这并没有解决大问题。然而，是的，这并不能解决大问题。我想你是想“挑战”自己去创建一个标签功能。既然你意识到有jQueryUI标签，我真的建议你试试。你会被惊呆的：）好吧，我已经创建了图像和所有东西，准备好了，我只需要标签功能就可以正常工作了。这就是我现在的工作。然而，它还不起作用。