1. 首頁
  2. 問答
  3. 如何在.net MVC中動態地激活導航菜單？

如何在.net MVC中動態地激活導航菜單？

2017-03-08 71 views

回答

1

與引導導航欄

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

結帳演示 here

來源

2017-05-09 12:17:43 Mosin

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>

來源

2017-03-08 07:27:30

相關問題

 相關問題