0

（Jquery）2つのdivがあり、それぞれへのリンクを使用して、ページ上で前後に切り替えています（表示と非表示）。クリックされたリンクを強調表示された背景色に変更し、もう一方をクリックすると強調表示され、前のリンクが通常に戻ります。

div用に取得したトグルコードを作り直して、リンク上のcssに適用しようとしましたが、理解できません。

誰かアイデアがあればありがたいです。ありがとうございました。

4

3 に答える 3

1 
<a href="link1" class="theLinkClass" id="currentLink">Link 1</a>
<a href="link2" class="theLinkClass">Link 2</a>

次に、CSSで

#currentLink {
    background-color: #FFCCCC;
}

次に、あなたのjQuery

$(document).ready(function(){

    $('.theLinkClass').click(function(){

        $('.theLinkClass').attr('id','');
        $(this).attr('id','currentLink');

    });

});

クラスまたは ID を持つ div にリンクがある場合、jQuery コードを短縮できます。

まあ言ってみれば....

<div class="myLinks">
    <a href="link1" class="currentLink">Link 1</a>
    <a href="link2">Link 2</a>
</div>

CSS

.currentLink{
    background-color: #FF0000;
}

jQuery

$(document).ready(function(){

    $('.mylinks a').click(function(){

        $('.mylinks a').removeClass('currentLink').filter(this).addClass('currentLink');

    });

});

2 つの例のうち後者は、jQuery の連鎖機能を利用しています。お役に立てれば！

于 2009-11-13T02:14:17.007 に答える
0

両方を選択し、選択したものの1つだけにクラスを適用するコードが必要です。

$('div.togglers').click(function() {
    $('div.togglers').removeClass('selected').filter(this).addClass('selected');
});

その後、2つの別々のCSSルールが必要になります。

div.togglers {
  background-color: white;
}
div.togglers.selected {
  background-color: red;
}
于 2009-11-13T02:01:21.120 に答える
0

強調表示と切り替えを行うように CSS を設定します。

.First .ShowFirst { border: 1px solid #000; }
.First .SecondContent { display: none; }
.Second .ShowSecond { border: 1px solid #000; }
.Second .FirstContent { display: none; }

親のクラス名を変更するクリック イベントをバインドする Javascript:

$(function() {
  $('.ShowFirst').Click(function(){
    $('#Parent').attr('className', 'First');
    return false;
  });
  $('.ShowSecond').Click(function(){
    $('#Parent').attr('className', 'Second');
    return false;
  });
});

親のクラス名によって、どのリンクが強調表示され、どのコンテンツが表示されるかが決まります。ここでは、最初のコンテンツが最初から表示されます。

<div id="Parent" class="First">
  <a class="ShowFirst" href="#">Show first</a>
  <a class="ShowSecond" href="#">Show second</a>
  <div class="FirstContent">1</div>
  <div class="SecondContent">2</div>
</div>

(おまけとして、読み込み中に両方のコンテンツを表示することはなく、読み込みが完了すると一方を非表示にします。コンテンツ div の 1 つだけが最初から表示されます。)

于 2009-11-13T02:15:20.190 に答える