JQuery选项卡选择问题？

Question

我对JQuery比较陌生，但是我无法正确地突出显示当前选定的标签，当选定时应该显示不同的颜色。有人可以帮我解决这个问题吗？

以下是JQuery代码。

$(document).ready(function() {

    //When page loads...
    $(".form-content").hide(); //Hide all content
    $("#menu ul li:first").addClass("selected-link").show(); //Activate first tab
    $(".form-content:first").show(); //Show first tab content

    //On Click Event
    $("#menu ul li").click(function() {

        $("#menu ul li").removeClass("selected-link"); //Remove any "selected-link" class
        $(this).addClass("selected-link"); //Add "selected-link" class to selected tab
        $(".form-content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the selected-link tab + content
        $(activeTab).fadeIn(); //Fade in the selected-link ID content
        return false;
    });

});

这是 CSS。

#container {
    width: 1024px;
    background: blue;
    padding: 0px;
    margin: 0px;
    float: left;
}

#menu {
    padding: 0px;
    margin: 0px;
}


#menu ul {
    width: 1024px;
    padding: 0px;
    margin: 0px;
    margin-top: 25px;
    border: 0px; 
    float: left;
    text-align: left;
    list-style-type: none;
}

#menu li {
    margin: 0px;
    margin-right: 1px;
    padding: 0px;
    float: left;
    border: 0px;
    width: auto;
}

#menu a:link, #menu a:visited {
    padding: 9px 9px;
    float: left;
    color: white;
    text-decoration: none;
    background: black;
    width: auto;
}

#menu a.selected-link, #menu a:hover {
    background: blue;
    color: white;
}

这是HTML代码。

    <div id="body-content">

        <div id="menu">
            <ul>
                <li><a href="#tab-1" title="">tab 1</a></li>
                <li><a href="#tab-2" title="">tab 2</a></li>
                <li><a href="#tab-3" title="">tab 3</a></li>
                <li><a href="#tab-4" title="">tab 4</a></li>
                <li><a href="#tab-5" title="">tab 5</a></li>
            </ul>
        </div>


        <div id="container">

            <div id="tab-1" class="form-content">
                <p>tab 1</p>
            </div>

            <div id="tab-2" class="form-content">
                <p>tab 2</p>
            </div>

            <div id="tab-3" class="form-content">
                <p>tab 3</p>
            </div>

            <div id="tab-4" class="form-content">
                <p>tab 4</p>
            </div>

            <div id="tab-5" class="form-content">
                <p>tab 5</p>
            </div>      

        </div>

    <div>

- NeedHeLp

Answer 1

尝试更改这些行：

$("#menu ul li").removeClass("selected-link");
$(this).addClass("selected-link");

至：

$("#menu ul li").find('a').removeClass("selected-link");
$(this).find('a').addClass("selected-link");

你想要给 link 添加类，而不是 li。

- Sarfraz

---

它会保持所有选定的选项卡突出显示。 - NeedHeLp

那是因为你应该将removeClass应用于a而不是li。 - rahul

Answer 2

编辑

$(document).ready(function() {

    //When page loads...
    $(".form-content").hide(); //Hide all content
    var firstMenu = $("#menu ul li:first");
    firstMenu.show();
    firstMenu.find("a").addClass("selected-link"); //Activate first tab
    $(".form-content:first").show(); //Show first tab content

    //On Click Event
    $("#menu ul li").click(function() {

        $("#menu ul li a").removeClass("selected-link"); //Remove any "selected-link" class
        $(this).find("a").addClass("selected-link"); //Add "selected-link" class to selected tab
        $(".form-content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the selected-link tab + content
        $(activeTab).fadeIn(); //Fade in the selected-link ID content
        return false;
    });

});

"

- rahul

---

这段代码虽然缺少一个"，但它仍然可以运行，不过我足够了解来修复它，谢谢 :) - NeedHeLp