Как динамически Активное меню навигации in.net MVC?

Пожалуйста, дайте мне javascript или jQuery код

2 2
javascript html css jquery twitter-bootstrap

2 ответа:

Пример кода с загрузочной панелью navbar 

<html>
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
        <style type="text/css">
            .navbar {
                border: none;
            }
            .navbar-brand,.navbar .navbar-header a,.navbar .dropdown-toggle, .navbar-nav > li > a {
                color: #ffffff !important;
            }
            .navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a:focus{
                color: #000000 !important;
                background-color: #ffffff;
            }
            .navbar-inverse {
                background-image: linear-gradient(to bottom,#5653AA, #26228A);
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-inverse" role="navigation">
          <div class="container-fluid">   
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Brand</a>
            </div>    
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    
              <ul class="nav navbar-nav">
                <li class="menu active"><a href="#">Link1</a></li>
                <li class="menu"><a href="#">Link2</a></li>
                <li class="menu"><a href="#">Link3</a></li>
                <li class="menu"><a href="#">Link4</a></li>
              </ul>      
            </div>
          </div>
        </nav>
        <script src="resources/jquery/jquery-1.11.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
               $(function(){
                 $(".menu").click(function(){
                    var callItem=$(this);
                    callItem.addClass('active');
                    $(".menu").not(callItem).removeClass('active');           
                 });
               });
        </script>
    </body>
<html>

Checkout demo здесь

1

Простой Пример

<html>
  <head>
  <style>
    .active{
         color:red;
         background-color:blue;
         border:1px solid black;
    }
  </style>
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
      <script>
       $(function(){
         $(".menuItem").click(function(){

            var currentItem=$(this);
            var menuLinks=$(".menuItem");
            menuLinks.not(currentItem).removeClass('active');
            currentItem.addClass('active');
         });

       });
      </script>
  </head>

  <body>

  <ul class="menu">
     <li class="menuItem">Menu Item 1</li>
     <li class="menuItem">Menu Item 2</li>
     <li class="menuItem">Menu Item 3</li>
  </ul>

  </body>
</html>
1