jquery - 添加/删除类 onClick Jquery

Question

我已经查看了似乎有一百万个示例，说明如何获取用户单击以更改类的链接，同时确保同级链接采用其原始类。我对 jQuery 很陌生，所以当我尝试这些不同的示例时，我承认我迷失了。这是我的CSS：

/*active link */
.current {
color: #f48239;
text-decoration: none;
}
/* inactive link*/
.link {
    color: black;
    text-decoration: none;

}

只显示与被点击的链接对应的 div 内容的 jQuery 函数：

 $(document).ready(function(){
    $('a').click(function () {
    var divname= this.name;
    $("#"+divname).show("fast").siblings().hide("fast");

    });

    });

现在是 HTML：

        <div id="left">
            <UL><h2>DBACO Projects</h2></UL>
                    <div id="headerspace">
                    </div>              
            <UL ID="links"><LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="QualcommInfo">QUALCOMM BUILDING M PROJECTS</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="StFrancisInfo">ST FRANCIS OF ASSISI CATHOLIC &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COMMUNITY-PHASE 1</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="YumaInfo">YUMA PIVOT POINT HOTEL AND &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;CONFERENCE CENTER</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="RealtyInfo">REALTY INCOME CORPORATE &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;HEADQUARTERS</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="CenterCityInfo">CENTER CITY MARRIOTT</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="PalmInfo">PALM MOUNTAIN RESORT</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="TrailsInfo">THE TRAILS AT PALM SPRINGS</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="OtayInfo">OTAY LOGISTICS CENTER</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="CabrilloInfo">CABRILLO MEDICAL OFFICE BUILDING</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="NorthgateInfo">NORTHGATE COMMUNITY CHURCH</A></h6></LI><BR>
            <LI><h6 style="display: inline;"><A class="link" HREF="#" NAME="LomaInfo">LOMA ALTA VILLAGE MOB</A></h6></LI></UL>
        </div>

任何关于如何点击链接以获取“当前”类同时确保所有其他链接保持在“链接”类中的任何想法都将不胜感激。

Answer 1

$(document).ready(function() {
    var $links = $('a');
    $links.click(function () {
        $links.removeClass('current').addClass('link');
        $(this).removeClass('link').addClass('current');

        var divname= this.name;
        $("#"+divname).show("fast").siblings().hide("fast");
    });
});

Answer 2

我不确定你为什么应用“显示”和“隐藏”，但这可能是你想要的。

$(document).ready(function(){
    $('a').click(function () {
        $(this)
            .removeClass("link")
            .addClass("current")
            .siblings("a").removeClass("current");
    });
});

该代码仅更改 css 类。

希望能帮助到你。

Answer 3

我建议这样做：http: //jsfiddle.net/3SR7E/

CSS：

.link.current {
color: #f48239;

}
.link {
color: black;
text-decoration: none;

}

javascript:

$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("fast").siblings().hide("fast");
$("#links li a").removeClass("current");               
    $(this).addClass("current");

});

});

Answer 4

你去http://jsfiddle.net/gHWWX/4/

$(document).ready(function(){
    $('a').click(function () {
        $('a').removeClass('current').addClass('link');
        $(this).removeClass('link').addClass('current');
        var divname= this.name;
        $("#"+divname).show("fast").siblings().hide("fast");
    });
});​

次要编辑