0

私は、兄弟リンクが元のクラスを取得することを保証しながら、ユーザーがクリックしてクラスを変更するリンクを取得する方法の百万の例のように見えるものを見てきました。私は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>

他のすべてのリンクが「リンク」のクラスにとどまるようにしながら、リンクをクリックして「現在」のクラスを取得する方法についてのアイデアをいただければ幸いです。

4

4 に答える 4

4 
$(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");
    });
});
于 2012-04-20T01:44:26.407 に答える
2

なぜ「表示」と「非表示」を適用するのかわかりませんが、これはあなたが望むものかもしれません。

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

このコードは、cssクラスの変更のみを行います。

それが役に立てば幸い。

于 2012-04-20T01:47:06.527 に答える
1

私はそれをこのようにすることを提案します：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");

});

});
于 2012-04-20T01:45:49.350 に答える
-1

ここに行く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");
    });
});​

マイナー編集

于 2012-04-20T01:44:34.720 に答える