javascript - 内容未在选项卡中加载

Question

您好，我的 jquery 选项卡有点问题，由于某种原因，它加载了第一个选项卡内容，但是当我选择另一个选项卡时，内容没有显示。当我尝试返回到第一个选项卡时，它也没有加载。

这是html

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<div id="content">
<div id="tabsX">
  <div id="tabContent">
  <ul class="tabs">
    <li><a id="all" href="#all" class="all">All</a></li>
    <li><a id="free" href="#free" class="free">Free</a></li>
    <li><a id="paid" href="#paid" class="paid">Paid</a></li>
    <li><a id="completed" href="#completed" class="completed">Completed</a></li>

    <div id="filter"><select name="filterQuest">
      <option>Name</option>
      <option>Payout</option>
      <option>Difficulty</option>
    </select></div>
  </ul>


<div class="tab_container">
    <div id="all" class="tab_content">
        asddd
    </div>
    <div id="free" class="tab_content">
       <!--Content-->adadada
    </div>
    <div id="paid" class="tab_content">
       <!--Content-->adad
    </div>
    <div id="completed" class="tab_content">
       <!--Content-->adsasd
    </div>

</div><!--- end tab_container--->
  </div><!---end tab content--->
  <br class="clear" />
</div><!--- end tabsX--->
<div id="tournament"></div><!--- end tournament--->
</div><!--- end content--->

这是javascript

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

});
</script>

这是CSS

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
@charset "utf-8";
/* CSS Document */

ul.tabs {
    padding: 0;
    float: left;
    list-style: none;
    height: 56px;
    width: 100%;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    border-bottom-width: 1px;
    border-bottom-style: ridge;
    border-bottom-color: #999;
    position:relative;


}
#tabsX {
    width: 800px;
    padding-left: 20px;
    float: left;
}
#tabsX .clear {
    clear: both;
}



ul.tabs li {
    float: left;
    padding: 0;
    height: 55px;
    line-height: 53px;
    margin-bottom: -1px;
    overflow: hidden;
    position: relative;
    margin-top: 0px;
    margin-right: 20px;
    margin-left: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;


}
ul.tabs li a {
    text-decoration: none;
    color: #333;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    outline: none;
    position:relative;

}
/*ul.tabs li a:hover {
    color: #9C3;
    text-transform: none;
}*/
html ul.tabs li.active a.all,
ul.tabs li  a.all:hover {
    color: #999;
    text-transform: none;
    border-bottom-width: thick;
    border-bottom-style: ridge;
    border-bottom-color: #999;
}
html ul.tabs li.active a.free,
ul.tabs li  a.free:hover {
    color: #7ED200;
    text-transform: none;
    border-bottom-width: thick;
    border-bottom-style: ridge;
    border-bottom-color: #7ED200;
}   
html ul.tabs li.active a.paid,
ul.tabs li  a.paid:hover {
    color: #CB0C01;
    text-transform: none;
    border-bottom-width: thick;
    border-bottom-style: ridge;
    border-bottom-color: #E40D01;   
}
html ul.tabs li.active a.completed,     
ul.tabs li  a.completed:hover {
    color: #06C;
    text-transform: none;
    border-bottom-width: thick;
    border-bottom-style: ridge;
    border-bottom-color: #06C;
}

.tab_container {
    clear: both;
    /*float: left;*/
    width: 100%;
    border-right: 1px ridge #999;
    margin-bottom: 20px;
    min-height: 930px;

}
.tab_content {
    padding: 20px;
}

.tab_content img {
    float: left;
    margin: 0 20px 20px 0;
    border: 1px solid #ddd;
    padding: 5px;
}
#tabContent #filter {
    float: right;
    margin-top: 17px;
    margin-right: 50px;
}

Answer 1

首先，HTML ID 属性必须是唯一的。在您的示例中，多个元素具有相同的 ID，这是错误的(对于 XHTML 验证和 JS - 这都会导致错误)。

其次，您是否使用调试器查看单击链接时 $(this) 包含的内容？

最后，“职业转换”的东西有用吗？我们需要您提供更多信息:-)