Bootstrap主動類動態導航

我使用load()方法從HTML文件加載導航欄。我希望每個<li>的活動類動態更改。我嘗試了很多選擇，但它不起作用。Bootstrap主動類動態導航

這裏是導航欄的代碼，我保存爲navigation.html：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="navbar-header"> 
    <a class="navbar-brand" href="#">Theatre Count</a> 
    </div> 
    <div> 
    <ul class="nav nav-pills pull-left" id="nav"> 
     <li><a href="home.html"><span class="glyphicon glyphicon-home"></span>&nbsp;Home</a></li> 
     <li class="active"><a href="status.html"><span class="glyphicon glyphicon-flag"></span>&nbsp;Status</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-picture"></span>&nbsp;Live Images</a></li> 
     <li><a href="reports.html"><span class="glyphicon glyphicon-stats"></span>&nbsp;Reports</a></li> 
     <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span>&nbsp;Archive</a></li> 
    </ul> 
    </div> 
    <button type="button" class="btn btn-primary pull-right logout"><span class="glyphicon glyphicon-log-out"></span>&nbsp;Log Out</button> 
</nav>

這是我status.html頁面代碼：

<body>  
    <script> 
    $(document).ready(function(){ 
     $('#navigation').load('navigation.html'); 
    }); 
    </script> 
    <script> 
    $("#nav li a").on("click", function(){  
     $("#nav li").removeClass("active"); //Remove any previously "active" li 
     $(this).closest("li").addClass("active"); //Set click li as active 
    });   
    </script>  
    <div id="navigation"></div> 
</body>

這裏我主動類的腳本不能正常工作。

來源

2014-12-03 Premkumar

http://jsfiddle.net/d2sxmn1L/1它的工作 – baao 2014-12-03 08:33:18

那裏是working.but它不是爲me.when工作我點擊報告它去報告。 html頁面，但仍處於活動狀態 – Premkumar 2014-12-03 08:48:33

請看下面的例子。希望它對你有用。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> 
 
</head> 
 

 
<body> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> 
 
    </script> 
 
    <script> 
 
     //Click on any li in ul with class 'navbar-nav' 
 
     $('ul.navbar-nav li').click(function(e) { 
 
     var $this = $(this); // declare variable for current li that we click 
 
     $('ul.navbar-nav').find('li.active').last().removeClass('active') //find all li that class class active and remove 
 
     $this.addClass('active'); //add 'active' class to current li. 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

來源

2015-03-10 11:53:59 Samda

這裏有一個快速，簡單和一小段jQuery代碼，對於這個要求效果很好。

// Sets active link in Bootstrap menu 
// Add this code in a central place used\shared by all pages 
// like your _Layout.cshtml in ASP.NET MVC for example 
$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');

現金 https://www.codementor.io/tips/2948713286/how-to-set-active-class-to-nav-menu-from-twitter-bootstrap

來源

2017-07-10 19:55:01 pengz

Bootstrap主動類動態導航

回答

相關問題