Jquery 如何在布局[ASP.NET MVC]中向html元素添加类

我有以下问题

在布局中我有菜单

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
        <li class="active">
            @Html.ActionLink("Blog","Posts","Blog",null,null)
        </li>

        <li>
            @Html.ActionLink("Książki", "Books", "Books", null,null)
        </li>

        <li>
            @Html.ActionLink("O mnie", "AboutMe", "Blog", null,null)
        </li>
    </ul>
</div>
<!--/navbar-collapse-->

@ActionLink（“Blog”，“Posts”，“Blog”，null，null）


@ActionLink（“Książki”，“Books”，“Books”，null，null）


@ActionLink（“O mnie”，“AboutMe”，“Blog”，null，null）

我想为单击的元素设置class='active'，所以我在下面编写了脚本（忽略它可以写得更好），它也在布局页面中

<!-- JS Global Compulsory -->
<script type="text/javascript" src="~/Scripts/assets/plugins/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/assets/plugins/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="~/Scripts/assets/plugins/bootstrap/js/bootstrap.min.js"></script>

<!-- JS Implementing Plugins -->
<script type="text/javascript" src="~/Scripts/assets/plugins/back-to-top.js"></script>

<!-- JS Page Level -->
<script type="text/javascript" src="~/Scripts/assets/plugins/countdown/jquery.countdown.js"></script>
<script type="text/javascript" src="~/Scripts/assets/plugins/backstretch/jquery.backstretch.min.js"></script>

@RenderSection("scripts", required: false)

<script type="text/javascript" src="~/Scripts/assets/js/app.js"></script>
<script type="text/javascript">

    jQuery(document).ready(function () {
        App.init();

        $('.navbar-nav li').click(function () {

            var lis = $('.navbar-nav li');
            lis[0].classList.remove('active');
            lis[1].classList.remove('active');
            lis[2].classList.remove('active');

            this.classList.add('active');
        });
    });

</script>

@RenderSection（“脚本”，必需：false）
jQuery（文档）.ready（函数（）{
App.init（）；
$（'.navbar nav li'）。单击（函数（）{
var lis=$（'.navbar nav li'）；
lis[0]。类列表。删除（'active'）；
lis[1]。classList.remove（'active'）；
lis[2]。classList.remove（'active'）；
this.classList.add（'active'）；
});
});

但当我点击一个链接后，它不会改变。我的意思是，当我跨过脚本时，它会发生更改，但在这之后，似乎会再次请求整个页面，并覆盖更改。我如何解决这个问题

谢谢你的回复

---

Paweł

你能试试这样的吗

jQuery(document).ready(function () {
    $('.navbar-nav li').click(function (event) {
        $('.navbar-nav li').removeClass('active');
        $(this).addClass('active');
        event.preventDefault();
        return false;
    });
});

---

你能试试这样的吗

jQuery(document).ready(function () {
    $('.navbar-nav li').click(function (event) {
        $('.navbar-nav li').removeClass('active');
        $(this).addClass('active');
        event.preventDefault();
        return false;
    });
});

---

您在这里遇到的问题是，当您单击链接并开始离开页面时，您正在使用javascript函数设置超链接的样式。Javascript是一种无状态语言，当您更改页面时，它不知道它所处的状态，也不知道它所在的页面……单击超链接就是这样做的

在这种情况下，更好的选择是使用onload事件，查看您的URL，并基于此设置类。因此，有一点是这样的：

html

---

我认为有一个稍微好一点的方法来解决这个问题，但是如果你打算使用无状态语言来控制你的样式，您必须在希望其可见的页面加载上执行此操作。

这里遇到的问题是，当您单击链接并开始离开页面时，您正在使用javascript函数设置超链接的样式。Javascript是一种无状态语言，当您更改页面时，它不知道它所处的状态，也不知道它所在的页面……单击超链接就是这样做的

在这种情况下，更好的选择是使用onload事件，查看您的URL，并基于此设置类。因此，有一点是这样的：

html

---

我认为有一个更好的方法来解决这个问题，但是如果你打算使用一种无状态语言来控制你的样式，你必须在你希望它可见的页面加载上进行。你似乎对JavaScript如何处理单独的HTTP请求和页面加载感到困惑。JavaScript代码是当前页面的一部分，并在客户端浏览器中执行。一旦导航到另一个页面，整个过程将重新开始。加载页面，然后执行任何JavaScript代码

您的JavaScript代码可能正在执行您希望它执行的操作，但在它运行后，该页面将被保留，另一个页面将从服务器加载，因此任何客户端状态都将丢失

---

这段代码应该放在服务器上，而不是放在客户端的JavaScript中。在视图中呈现HTML时，应在相应的元素上设置活动类。当用户单击一个链接时，它将从服务器请求一个不同的页面，当您呈现该页面的HTML时，您将相应地设置活动类。不需要JavaScript代码。

您似乎对JavaScript如何处理单独的HTTP请求和页面加载感到困惑。JavaScript代码是当前页面的一部分，并在客户端浏览器中执行。一旦导航到另一个页面，整个过程将重新开始。加载页面，然后执行任何JavaScript代码

您的JavaScript代码可能正在执行您希望它执行的操作，但在它运行后，该页面将被保留，另一个页面将从服务器加载，因此任何客户端状态都将丢失

---

这段代码应该放在服务器上，而不是放在客户端的JavaScript中。在视图中呈现HTML时，应在相应的元素上设置活动类。当用户单击一个链接时，它将从服务器请求一个不同的页面，当您呈现该页面的HTML时，您将相应地设置活动类。不需要JavaScript代码。

为什么要使用四行而不是

$（'.navbar nav li'）。removeClass（'active'）

我不能忽略：）你可以使用

removeClass

和

addClass

来代替触摸

classList

属性。是的，

$（this.addClass（'active'）哈哈谢谢丽晶：）为什么你用四行而不是
$（'.navbar nav li'）。removeClass（'active'）
我不能忽略：）你可以使用
removeClass
和
addClass
来代替触摸
classList
属性。是的，
$（this.addClass（'active'）哈哈，谢谢摄政王：）我想他想在点击后导航到不同的页面。在
事件中没有必要。preventDefault（）如果使用
返回false感谢Krzysiek的快速回复。现在它的行为符合我的要求，但这段代码无法在控制器中调用action方法（如MajoB所述，导航到不同的页面）。我应该在javascript代码中调用action方法而不是使用ActionLink吗？正如MajoB所指出的，这些链接应该将浏览器指向不同的页面。在这种情况下，您应该阅读您所在页面的URL（可能是从
位置
对象中提取的），然后在相应的列表项上添加类。我认为他希望在cl之后导航到不同的页面
$(document).load(function(){
    var currentUrl = window.location.href;
    if (currentUrl.toLowerCase().indexOf("blog") >= 0){
        $('#BlogLink').addClass('active');
    }
    if (currentUrl.toLowerCase().indexOf("books") >= 0){
         //And so on...
    }
});