Question

我正在尝试使用J查询addClass和RemoveClass将我选择的选项卡类属性设置为active类。我添加了警报以确保该功能触发，并显示警报消息。问题是addClass和removeClass似乎不起作用。

        $(document).ready(function () {
            $('a').click(function () {
                alert(this.tagName);
                $('a').removeClass("active");
                $(this).addClass("active");                                      

            });
        });

我正在使用asp.net MVC来构建链接，并使用引导程序来进行样式设置：

        <ul class="nav navbar-nav text-center">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Recommendations", "Recommendations", "Home")</li>
                <li>@Html.ActionLink("Gallery", "Gallery", "Home")</li>
                <li class="dropdown">
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">actions
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">1</a></li>
                        <li><a class="dropdown-item" href="#">2</a></li>
                        <li><a class="dropdown-item" href="#">3</a></li>
                    </ul>
                </li>
            </ul>

这是单击链接并收到警报消息后从浏览器复制的HTML代码，但是a标签都不具有活动类...

    <ul class="nav navbar-nav text-center">
                <li><a href="/Home/Index">Home</a></li>
                <li><a href="/">About</a></li>
                <li><a href="/Home/Recommendations">Recommendations</a></li>
                <li><a href="/Home/Gallery">Gallery</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">auctions
                       <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">1</a></li>
                        <li><a class="dropdown-item" href="#">2</a></li>
                        <li><a class="dropdown-item" href="#">3</a></li>
                    </ul>
                 </li>
             </ul>

Answer 1

好吧，基于@DnyanWaychal所说的内容找到了答案，该页面在添加该类后被重定向到另一个页面，所以我更改了是否影响正确的页面：

$(function() {
   var href = window.location.href;
   $('a').each(function(e,i) {
   if (href.indexOf($(this).attr('href')) >= 0) {
      $(this).addClass('active');
   }
 });
});

Answer 2

你可以喜欢

<li class="@(ViewContext.RouteData.Values["Action"].ToString() == "Index" ? "active" : "")">@Html.ActionLink("Home", "Index", "Home")</li>

Answer 3

您可以为标签使用单独的类。在这种情况下，请尝试以下代码。

$(document).ready(function () {
        $('<className> a').click(function () {
            $(this).toggleClass("active");                                     

        });
    });

为什么不按预期方式添加和删除我的课程？

3 个答案: