Question

我已经查看过如何获取用户点击更改类的链接的百万个示例，同时确保兄弟链接采用其原始类。我对jQuery很新，所以当我尝试这些不同的例子时，我很遗憾。这是我的css：

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

}

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

 $(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

我不确定你为什么申请“show”和“hide”，但这可能就是你想要的。

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

次要编辑

添加/删除类onClick Jquery

4 个答案: