Twitter Bootstrap將活動類添加到li

Question

使用twitter引導，我需要啓動活動類到主導航的li部分。自動的。 我們使用php而不是ruby。

樣品導航：

<ul class="nav"> 
    <li><a href="/">Home</a></li> 
    <li><a href="/forums">Forums</a></li> 
    <li><a href="/blog">Blog</a></li> 
    <li><a href="/faqs.php">FAQ's</a></li> 
    <li><a href="/item.php">Item</a></li> 
    <li><a href="/create.php">Create</a></li> 
</ul> 

引導代碼如下：

<li class="active"><a href="/">Home</a></li> 

所以只需要弄清楚如何類主動附加到當前頁面。在Stack上看過幾乎所有的答案，沒有真正的喜悅。

我過起了這一點：

/*menu handler*/ 
$(function(){ 
    var url = window.location.pathname; 
    var activePage = url.substring(url.lastIndexOf('/')+1); 
    $('.nav li a').each(function(){ 
     var currentPage = this.href.substring(this.href.lastIndexOf('/')+1); 

     if (activePage == currentPage) { 
      $(this).parent().addClass('active'); 
     } 
    }); 
}) 

，但沒有喜悅。

Answer 1

我們設法在年底解決：

/*menu handler*/ 
$(function(){ 
    function stripTrailingSlash(str) { 
    if(str.substr(-1) == '/') { 
     return str.substr(0, str.length - 1); 
    } 
    return str; 
    } 

    var url = window.location.pathname; 
    var activePage = stripTrailingSlash(url); 

    $('.nav li a').each(function(){ 
    var currentPage = stripTrailingSlash($(this).attr('href')); 

    if (activePage == currentPage) { 
     $(this).parent().addClass('active'); 
    } 
    }); 
}); 

Answer 2

這是完整的Twitter引導示例，並基於查詢字符串應用活動類。

幾個步驟來實現正確的解決辦法：

1）包括最新的jquery.js和bootstrap.js JavaScript文件。

2）包含最新bootstrap.css文件

3）包含查詢字符串，0.9.0.js在JS獲得查詢字符串變量的值。

4）HTML：

<div class="navbar"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav"> 
     <li class="active"> 
      <a href="#?page=0"> 
      Home 
      </a> 
     </li> 
     <li> 
      <a href="#?page=1"> 
      Forums 
      </a> 
     </li> 
     <li> 
      <a href="#?page=2"> 
      Blog 
      </a> 
     </li> 
     <li> 
      <a href="#?page=3"> 
      FAQ's 
      </a> 
     </li> 
     <li> 
      <a href="#?page=4"> 
      Item 
      </a> 
     </li> 
     <li> 
      <a href="#?page=5"> 
      Create 
      </a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div> 

的JQuery在腳本標籤：

$(function() { 
    $(".nav li").click(function() { 
     $(".nav li").removeClass('active'); 
     setTimeout(function() { 
      var page = $.QueryString("page"); 
      $(".nav li:eq(" + page + ")").addClass("active"); 
     }, 300); 

    }); 
}); 

我已經做了完整的垃圾桶，所以請點擊這裏http://codebins.com/bin/4ldqpaf

Answer 3

這段代碼從不背叛我。仍然工作得很好。

var url = window.location; 
// Will only work if string in href matches with location 
$('ul.nav a[href="'+ url +'"]').parent().addClass('active'); 

// Will also work for relative and absolute hrefs 
$('ul.nav a').filter(function() { 
    return this.href == url; 
}).parent().addClass('active'); 

Answer 4

這些都不適合我。我的Bootstrap設置導航到單獨的頁面（所以我不能在點擊操作上做到這一點，但活動類在導航到新頁面時被刪除）和我的網址完全不匹配。所以這就是我所做的，基於我的例外情況。希望它可以幫助別人：

//Adding the active class to Twitter bootstrap navs, with a few alternate approaches 

$(document).ready(function() { 
    var rawhref = window.location.href; //raw current url 
    var newpage = ((window.location.href.match(/([^\/]*)\/?$/)[1]).substring(1)); //take only the last part of the url, and chop off the first char (substring), since the contains method below is case-sensitive. Don't need to do this if they match exactly. 
    if (newpage == 'someNonMatchingURL') { //deal with an exception literally 
    newpage = 'matchingNavbarText' 
    } 
    if (rawhref.indexOf('somePartofURL') != -1) { //look for a consistent part of the path in the raw url to deal with variable urls, etc. 
    newpage = "moreMatchingNavbarText" 
    } 
    $(".nav li a:contains('" + newpage + "')").parent().addClass('active'); //add the active class. Note that the contains method requires the goofy quote syntax to insert a variable. 

}); 

Answer 5

，如果你在它應該自動工作的標籤把

data-toggle="pill" 

。

http://twitter.github.com/bootstrap/javascript.html#tabs

標記

Answer 6

下閱讀這做的工作對我來說，包括活動主下拉菜單和積極兒童（感謝422）：

$(document).ready(function() { 
    var url = window.location; 
    // Will only work if string in href matches with location 
    $('ul.nav a[href="' + url + '"]').parent().addClass('active'); 

    // Will also work for relative and absolute hrefs 
    $('ul.nav a').filter(function() { 
     return this.href == url; 
    }).parent().addClass('active').parent().parent().addClass('active'); 
}); 

Answer 7

你真的不需要帶Bootstrap的任何JavaScript：

<ul class="nav"> 
    <li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li> 
    <li><a data-target="#" data-toggle="pill" href="#users">Users</a></li> 
</ul> 

要在選擇菜單項後執行更多任務，您需要按照其他帖子所解釋的JS。

希望這會有所幫助。

Answer 8

如果您使用的路線和動作的MVC框架：

$(document).ready(function() { 
    $('a[href="' + this.location.pathname + '"]').parent().addClass('active'); 
}); 

正如基督教士蘭德雷在這個答案說明： https://stackoverflow.com/a/13375529/101662

Answer 9

試試這個。

// Remove active for all items. 
$('.page-sidebar-menu li').removeClass('active'); 

// highlight submenu item 
$('li a[href="' + this.location.pathname + '"]').parent().addClass('active'); 

// Highlight parent menu item. 
$('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active'); 

Answer 10

萬一你在使用Angulajs自舉：這是一個簡單的指令，（因爲錦引用的數據切換不是在角UI在內）對我的作品。希望可以幫助。

app.directive("myDataToggle", function(){ 
    function link(scope, element, attrs) { 
     var e = angular.element(element); 
     e.on('click', function(){ 
      e.parent().parent().children().removeClass('active'); 
      e.parent().addClass("active"); 
     }) 
    } 
    return { 
     restrict: 'A', 
     link: link 
    }; 
}); 

---

<ul class="nav nav-sidebar"> 
    <li><a href="#/page1" my-data-toggle>Page1</a></li> 
    <li><a href="#/page2" my-data-toggle>Page2</a></li> 
    <li><a href="#/page3" my-data-toggle>Page3</a></li> 
</ul> 

Answer 11

這工作對我很好。它將兩個簡單的導航元素和下拉導航元素標記爲活動狀態。

$(document).ready(function() { 
    var url = window.location; 

    $('ul.nav a[href="' + this.location.pathname + '"]').parent().addClass('active'); 

    $('ul.nav a').filter(function() { 
     return this.href == url; 
    }).parent().parent().parent().addClass('active'); 
}); 

this.location.pathname傳遞到$('ul.nav a[href="'...'"]')馬克也簡單NAV元件。通過url沒有爲我工作。

Answer 12

解決方案很簡單，不需要服務器端或ajax，你只需要jQuery和Bootstrap。在每一頁上，將id添加到body標記。使用該id來查找包含頁面名稱（標記的值）的標記。

實施例：

page1.html

<body id="page1"> 
    <ul class="nav navbar-nav"> 
     <li><a href="page1.html">Page1</a></li> 
     <li><a href="page2.html">Page2</a></li> 
    </ul> 
    <script src="script.js"></script> 
</body> 

page2.html

<body id="page2"> 
    <ul class="nav navbar-nav"> 
     <li><a href="page1.html">Page1</a></li> 
     <li><a href="page2.html">Page2</a></li> 
    </ul> 
    <script src="script.js"></script> 
</body> 

的script.js

<script> 
    $(function() { 
     $("#page1 a:contains('Page1')").parent().addClass('active'); 
     $("#page2 a:contains('Page2')").parent().addClass('active'); 
    }); 
</script> 

非常感謝Ben！YouTube

Answer 13

要激活菜單和子菜單，甚至在網址參數，波紋管使用代碼：

// Highlight the active menu 
$(document).ready(function() { 
    var action = window.location.pathname.split('/')[1]; 

    // If there's no action, highlight the first menu item 
    if (action == "") { 
     $('ul.nav li:first').addClass('active'); 
    } else { 
     // Highlight current menu 
     $('ul.nav a[href="/' + action + '"]').parent().addClass('active'); 

     // Highlight parent menu item 
     $('ul.nav a[href="/' + action + '"]').parents('li').addClass('active'); 
    } 
}); 

此接受的URL，如：

/職位
/職位/ 1
/posts/1/edit

Answer 14

我有同樣的問題m，這就是我在我的應用程序啓動腳本中添加的內容，並且工作順利。這裏是javascript

$(document).ready(function($){ 
    var navs = $('nav > ul.nav'); 

    // Add class .active to current link 
    navs.find('a').each(function(){ 

    var cUrl = String(window.location).split('?')[0]; 
    if (cUrl.substr(cUrl.length - 1) === '#') { 
     cUrl = cUrl.slice(0,-1); 
    } 

    if ($($(this))[0].href===cUrl) { 
     $(this).addClass('active'); 

     $(this).parents('ul').add(this).each(function(){ 
     $(this).parent().addClass('open'); 
     }); 
    } 
    }); 
}); 

而相應的HTML如下所示。我使用CoreUI，以驚人的開源管理模板並且具有用於像角，純自舉許多前端框架支撐，角4等

<div class="sidebar"> 
<nav class="sidebar-nav open" > 
    <ul class="nav" id="navTab" role="tablist"> 
     <li class="nav-item"> 
      <a class="nav-link" href="/summary"><i class="icon-speedometer"></i> Dashboard </a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="/balanceSheet"><i class="icon-chart"></i> Balance Sheet </a> 
     </li> 
     <li class="divider"></li> 
     <li class="nav-title border-bottom"> 
      <p class="h5 mb-0"> 
       <i class="icon-graph"></i> Assets 
      </p> 
     </li> 
    </ul> 
    </nav> 
</div> 

Answer 15

$(function() { 
// Highlight the active nav link. 
var url = window.location.pathname; 
var filename = url.substr(url.lastIndexOf('/') + 1); 
$('.navbar a[href$="' + filename + '"]').parent().addClass("active"); 

}）;

詳情Click Here!

的