jquery - How to add class to html elements in layout [ASP.NET MVC] -

jquery - How to add class to html elements in layout [ASP.NET MVC] -

i have next problem.

in layout have menu

<!-- collect nav links, forms, , other content 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-->

i want set class='active' element clicked, wrote script below (ignore can written better) in layout page.

<!-- 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>

but after click on link doesn't change. mean changes when step on script, after seems whole page requested 1 time again , changes overriden. how solve this?

thanks replies.

paweł

it seems confused how javascript works respect separate http requests , loading of page. javascript code part of current page , executes in client's browser. 1 time navigate different page, whole process starts on again. page loads, , javascript code executed.

your javascript code may doing intend do, after runs, page left , page loaded server, client-side state lost.

this code should set on server, instead of in javascript on client. when render html in views, should set active class on appropriate element @ point. when user clicks link, request different page server, , when render html page, set active class accordingly. no javascript code required.

jquery html asp.net asp.net-mvc