1

私は次のものを持っています：

     <div id="libdiv" class = "libraryheader ">
         <a href="#"  class="libraryheader" id="videoLink"  /> Videos </a>
         | <a  href="#" class="libraryheader"  id="articleLink" /> Articles </a> 
         | <a href="#" id="newsLink" class="libraryheader"  /> News </a>
     </div>

リンクをクリックすると、リンクの色が金色に変わり、他のリンクが灰色になるのが好きです。

    .libraryheader
     {

        font-family: sans-serif;
        font-size: 24px;
        color: #4F5A5E;  /* grey color */ 
        text-decoration: none;
     }

    .libraryheaderselected
    {

      font-family: sans-serif;
      font-size: 24px;
      color: gold;
      text-decoration: none;
    }

リンクを選択すると金色に変わりますが、別のリンクを選択すると、以前に選択したリンクは金色のままで灰色にはなりません。選択したリンクだけがゴールドになるのが好きです。他のすべては、デフォルトで灰色にする必要があります。

ここに私が持っているコードがあります:

 $('#libdiv a').click(function () {

            $(this).removeClass('libraryheaderselected');
            $('#videoLink').addClass('libraryheader');
            $('#articleLink').addClass('libraryheader');
            $('#newsLink').addClass('libraryheader');

            $(this).addClass('libraryheaderselected');             


        });
4

5 に答える 5

0

まず第一に、どのリンクからもクラスを追加または削除する必要はありません。libraryheaderHTML 要素は、一度に複数のクラスを持つことができます。つまり、テキストの色を指定libraryheaderするセカンダリ クラス ( など) を切り替えるだけで、すべてのリンクがクラスを保持できます。selected

したがって、JS に必要なのはこれだけです。

$('#libdiv a').click(function () {
    $('#libdiv a.selected').removeClass('selected');
    $(this).addClass('selected');
});

また、CSS は冗長です。必要なのはこれだけです：

 .libraryheader
 {

    font-family: sans-serif;
    font-size: 24px;
    color: #4F5A5E;  /* grey color */ 
    text-decoration: none;
 }

.libraryheader.selected
{
    color: gold;
}
于 2013-09-24T20:10:03.100 に答える
0 
$("#libdiv a").on("click",function(){
  $(this).addClass("libraryheaderselected");
  $(this).siblings().removeClass("libraryheaderselected");
});

各リンクから別の関数としてクラスを削除する必要がないため、これはより効果的です。2 つのメソッドとして実行できます。1 つ目は、クリックしたものにクラスを追加します。2 番目は、すべての兄弟からクラスを削除します。

于 2013-09-24T19:58:19.270 に答える
0

これを試しましたか？

$('#libdiv a').click(function () {
   $('#libdiv a').removeClass('libraryheaderselected');
   $('#videoLink').addClass('libraryheader');
   $('#articleLink').addClass('libraryheader');
   $('#newsLink').addClass('libraryheader');
   $(this).addClass('libraryheaderselected');  
});
于 2013-09-24T19:53:13.960 に答える
0

これを非常に簡単に行うことができ、

$('#libdiv a').click(function () {
    // Toggle the two classes on the clicked item. Since all items start with
    // just the class libraryheader, this will remove it and add the selected
    $(this).toggleClass("libraryheader libraryheaderselected")
        // Then go work on the sibling links (i.e. all except the one clicked)
        .siblings("a")
        // and reset them back to "libraryheader" status
        .removeClass("libraryheaderselected").addClass("libraryheader");
});

これを行うと、それを忘れることができます。リンクの数や ID に関係なく機能します。

于 2013-09-24T19:54:48.907 に答える