我有以下问题。
在布局中，我有菜单
<!-- 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-->
我想为单击的元素设置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>
但是，单击链接后，它不会改变。我的意思是单步执行脚本时它会更改，但是此后似乎再次请求了整个页面，并且更改被覆盖。我该如何解决？
感谢您的任何答复。
保罗
您似乎对JavaScript如何针对单独的HTTP请求和页面加载感到困惑。JavaScript代码是当前页面的一部分，并在客户端的浏览器中执行。导航到其他页面后，整个过程将重新开始。页面加载，然后执行任何JavaScript代码。
您的JavaScript代码可能正在执行您打算做的事情，但是在运行之后，该页面被保留下来，并且从服务器加载了另一个页面，因此任何客户端状态都将丢失。
此代码应放在服务器上，而不是放在客户端的JavaScript中。在视图中呈现HTML时，应在此时在适当的元素上设置活动类。当用户单击链接时，它将从服务器请求一个不同的页面，并且在呈现该页面的HTML时，您将相应地设置活动类。不需要JavaScript代码。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句