web-dev-qa-db-ja.com

jquery add remove classonclick

ナビゲーションメニューがあります！

   <div class="nav">
    <ul class="navigation">
    <li class="selected"><a href="#">HOME</a></li>
    <li><a href="#">PROFILE></a></li>
    <li><a href="#">CONTACTUS</a></li>
    <li><a href="#">ABOATUS</a></li>
    </ul>
    </div>

次に、任意の（プロファイル、Contactus、aboutus）をクリックした後に選択したクラスを追加し、Jqueryを使用して選択したホームを削除する方法を説明します。

ありがとう

jquerynavigationaddclassremoveclass
11
Panaroma

クラス名selectedの1つ要素のみが必要であると仮定すると、次のことをお勧めします。

$('ul.navigation li a').click(
    function(e) {
        e.preventDefault(); // prevent the default action
        e.stopPropagation(); // stop the click from bubbling
        $(this).closest('ul').find('.selected').removeClass('selected');
        $(this).parent().addClass('selected');
    });

JS Fiddle demo 。

14
David says reinstate Monica

あなたはtoggleClassを使うことができます：

$("#myElement1").click(function(){
   $("#myElement2").toggleClass("myClass");
});
7
Headshota
$("a").click(function()
{
  $("a").parent().removeClass("selected");

  $(this).parent().addClass("selected");
});

ライブデモ

4
Baz1nga