jquery - mvc3アクションリンクでjquery add remove classを使用するには?

Question

jquery を使用して、選択したメニューのクラスを追加しようとしています。次の方法を試しましたが、うまくいきません。

そして私のコードは

<div class="paragraph">
   <ul class="tablinkss">
        <li class="active">@Html.ActionLink("Login", "LogOn")</li>
        <li>@Html.ActionLink("Register", "Register")</li>
   </ul>
</div>

そして私のjquery

$(function () {
           $('ul.tablinkss li').click(function () {
               $('ul.tablinkss li').removeClass("active");
               $(this).addClass("active");
           });
       });

ありがとう、

Answer 1

Html.ActionLinkブラウザに新しいページをロードさせるハイパーリンクを返します。 この場合、リンクが次のページをロードしないようにしない限り、JavaScript は機能しません。 まあ、それは一瞬動作し、ブラウザは新しいページを表示します.

1. ログインが有効です。
2. ユーザーは [登録] をクリックします。
3. JavaScriptにより、登録が有効になります。
4. ブラウザが登録ページをロードします。
5. ログインが再びアクティブになります。

JavaScript ではなく、Razor テンプレートでこれを修正する必要があります。

Answer 2

試してくださいevent.stopPropagation()：

$(function () {
   $('ul.tablinkss li').click(function(e) {
       e.stopPropagation()
       $('ul.tablinkss li').removeClass("active");
       $(this).addClass("active");
   });
});

Answer 3

これを試して

  $('ul.tablinkss li').on('click',function () {
           $('ul.tablinkss li').removeClass("active");
           $(this).addClass("active");
  });