1

私はリストを持っています（視覚的な明確さのためだけのスペース）：

<li class="a">      A     </li>
<li class="b">      B     </li>
<li class="c">      C     </li>
<li class="a b">    A B   </li>
<li class="a c">    A C   </li>
<li class="b c">    B C   </li>
<li class="a b c">  A B C </li>

私は一連の「コントロール」を持っています：

<a class="show-a" href="#">A</a>
<a class="show-b" href="#">B</a>
<a class="show-c" href="#">C</a>
<a class="show-all active" href="#">ALL</a>

私はいくつかのCSSを持っています：

li           {color: red; }
 .deactivate {color: #ddd; }
a            {color: #ddd; }
 .active     {color: blue; }

私は2つのことをしたい：

  1. 対応するコントロールがクリックされたら、クリックされた場合はそれぞれのセグメントにクラスを<a>追加/削除し、クラスのないすべての要素に適用します。したがって、クラスを必要としなくなったものからクラスを削除します。.deactivate<li>.show-a.deactivate.a.deactivate<li>

  2. コントロールに現在の選択を反映します。.activeつまり、クラスをそれぞれのアンカーリンクに追加/削除します。（これは私が答えを見つけることができない部分です）。

ノート：

  • 一度に使用できるコントロールは1つだけ.activeです。ラジオボタンと似ていますが、CSSを介してよりスタイルを設定できます。
  • そこにあるより良い解決策はjQueryとtoggleClassを使用しているようです。

REその他の回答：たくさんあります（例：http： //jsfiddle.net/Cx4uK/2/）が

  • ＃2に対応するものはありません
  • ほとんどの場合、クラスを切り替えるのではなく、表示/非表示にします
  • 説明されているものはほとんどないため、答えを繰り返して、それらがどのように機能するかを理解することは困難です（これが私の究極の目標です）。
4

2 に答える 2

1

このソリューションは、data-selector属性を使用して、特定のリンクに関連するアイテムのセレクターを保持します。それはJSを本当にきれいにするのに役立ちます。

アクティブなリンクについては、すべてのリンクから削除.activeして、クリックしたリンクに追加するだけです。

jsFiddle

JS

$(document).ready(function () {
    $('.links a').click(function () {

        // Remove .active from all links then add to the clicked one
        $('.links a').removeClass('active');
        $(this).addClass('active');

        // Remove .active from all lis then use the attribute data-selector to set
        // the relevant items
        $('.letters li').removeClass('active');
        $(this.getAttribute('data-selector')).addClass('active');
    });
});

HTML

<div class="links">
    <a class="show-a" href="#" data-selector=".a">A</a>
    <a class="show-b" href="#" data-selector=".b">B</a>
    <a class="show-c" href="#" data-selector=".c">C</a>
    <a class="show-all active" href="#" data-selector=".a,.b,.c">ALL</a>
</div>

<ul class="letters">
    <li class="a">      A     </li>
    <li class="b">      B     </li>
    <li class="c">      C     </li>
    <li class="a b">    A B   </li>
    <li class="a c">    A C   </li>
    <li class="b c">    B C   </li>
    <li class="a b c">  A B C </li>
</ul>

CSS

.active {
    background-color:#AAA;
}
于 2013-03-26T07:36:20.420 に答える
0

私はあなたがこのようなものが欲しいと思います：

 $(function () {
    $("#user-controls div").first().addClass('active'); // <---add this line
    $("#user-controls").on('click', 'div', function () {
       $(this).addClass('active').siblings().removeClass('active'); //<--and this
       var classToShow = this.id.split('-')[1],
        filter = classToShow === "all" ? 'div' : '.' + classToShow;
        $("#devices").children().show().not(filter).hide();
    });
});

チェックアウトフィドル

ここで私はcssクラスを作りました.active{}：

.active {
  background:red !important;
  color:yellow;
}

そして、ページがロードされた直後に、最初のdivがcssクラスに適用され#user-controlsます。all.active

これで：

$("#user-controls div").first().addClass('active');

次に、他のリンクをクリックした場合、この場合.siblings()は便利な機能です。

$(this).addClass('active').siblings().removeClass('active');

それを分割しましょう：

$(this).addClass('active')

.activeこの行は、クリックされたリンクにクラスを追加し、

.siblings().removeClass('active');

これは、同じレベルの他のリンクに適用されている他のリンククラスを削除します。

于 2013-03-26T07:38:03.627 に答える