Ik gebruik twitter-bootstrap en ik moet de actieve klasse starten in het li-gedeelte van de hoofdnavigatie. Automagisch.
We gebruiken php niet ruby.

Voorbeeld navigatie:

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

Bootstrap-code is als volgt:

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

Dus je hoeft alleen maar uit te zoeken hoe je de actieve klasse aan de huidige pagina kunt toevoegen. Heb bijna elk antwoord op Stack bekeken, zonder echt plezier.

Ik had hiermee gespeeld:

/*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'); 
        } 
    });
})

Maar geen vreugde.

Antwoord 1, autoriteit 100%

Voor Bootstrap 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');

Bijwerken

Voor Bootstrap 4:

var url = window.location;
// Will only work if string in href matches with location
$('ul.navbar-nav a[href="'+ url +'"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.navbar-nav a').filter(function() {
    return this.href == url;
}).parent().addClass('active');

Antwoord 2, autoriteit 28%

We hebben het uiteindelijk kunnen oplossen:

/*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'); 
    } 
  });
});

Antwoord 3, autoriteit 23%

Je hebt JavaScript niet echt nodig met Bootstrap:

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

Om meer taken uit te voeren nadat het menu-item is geselecteerd, heb je JS nodig, zoals uitgelegd door andere berichten hier.

Hopelijk helpt dit.

Antwoord 4, autoriteit 10%

als je

data-toggle="pill"

in de tag zou het automatisch moeten werken.

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

lees onder Markup

Antwoord 5, autoriteit 8%

Dit deed het werk voor mij, inclusief actieve hoofdmenu’s en de actieve kinderen(dankzij 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');
});

6, Autoriteit 6%

Als u een MVC-raamwerk gebruikt met routes en acties:

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

Zoals geïllustreerd in dit antwoord door Christian Landgren:
https://stackoverflow.com/a/13375529/101662

7, Autoriteit 5%

Probeer dit.

// 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');

8, Autoriteit 2%

Dit werkt prima voor mij. Het markeert zowel eenvoudige nav-elementen als dropdown NAV-elementen als actief.

$(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');
});

Doorgeven this.location.pathnameNaar $('ul.nav a[href="'...'"]')MARKERS Ook eenvoudige NAV-elementen. Doorgeven urlWerkte het niet voor mij.

9, Autoriteit 2%

Voor het geval u BOOSTRAP in Angulajs gebruikt: dit is een eenvoudige richtlijn die voor mij werkt (omdat data-toggle aangehaald door KAM niet is opgenomen in Angular-UI). Hoop kan helpen.

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>

10

De oplossing is eenvoudig en er is geen behoefte aan serverzijde of Ajax, u hebt alleen jQuery en bootstrap nodig. Voeg op elke pagina een idtoe aan de bodyTag. Gebruik dat idom een ​​tag te vinden die de pagina naam (waarde van een tag) bevat.

Voorbeeld:

Pago1html

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

Hartelijk dank aan Ben! YouTube

Antwoord 11

In enkele zeldzame gevallen is er een probleem met het geaccepteerde antwoord voor bootstrap 4:
Om de oplossing te gebruiken voor relatieve paden zoals:

<ul class="navbar-nav nav-t">
   <li class="nav-item"><a href="index.php" class="nav-link">Home</a></li>
   <li class="nav-item"><a href="about.php" class="nav-link">About</a></li>
   <li class="nav-item"><a href="blog.php" class="nav-link">Blog</a></li>
   <li class="nav-item"><a href="info.php" class="nav-link">Info</a></li>
</ul>

Dan zul je ontdekken dat de code voor:

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

actieve pagina retourneert de hele url en huidige locatie retourneert de huidige href DOM Element-waarde die filename.php is.
Om dit op te lossen, past u de code een beetje aan door een methode toe te voegen om dit te corrigeren:

//... other js/jquery code
var activeMenuItemChanges=function () {
    function stripTrailingSlash(str) {
        if(str.substr(-1)=='/'){
            return str.substr(0, str.length -1);
        }
        return str;
    }
    // for cases where we do not use full url but relative file names in the href of ul>li>a tags:
    function getRelativeFileName(str){
        let page=str.substr(str.lastIndexOf('/')+1);
        if(page.length > 0){
            return page;
        }
        return 'index'|'index.php';
    }
    let url=window.location.pathname;
    let activeLocation=stripTrailingSlash(url);
    let activeFileName=getRelativeFileName(activeLocation);
    $('.nav-item a').each(function() {
        let currentLocation=stripTrailingSlash($(this).attr('href'));
        if(activeFileName==currentLocation){
            $(this).parent().addClass('active');
        }
    });
}
activeMenuItemChanges();
//... other js/jquery code

12

Geen van deze werkte voor mij. Mijn bootstrap-instelling navigeert naar afzonderlijke pagina’s (dus ik kan het niet doen op een klikactie, maar de actieve klasse wordt verwijderd op de navigatie naar een nieuwe pagina) en mijn URL’s komen niet exact overeen. Dus hier is wat ik deed, op basis van mijn op uitzondering gebaseerde situatie. Ik hoop dat het anderen helpt:

//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.
});

13

Gebruik de CODE HELLOP:

om de menu’s en het submenu’s te activeren, zelfs met de paramumenten in de URL, gebruikt u de code.

// 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');
    }
});

Dit accepteert URL’s zoals:

/ berichten
/ Posts / 1
/ Posts / 1 / Bewerken

14

Ik had hetzelfde probleem, en dit is wat ik heb toegevoegd in mijn app-startscript, en het werkte soepel. Hier is het 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');
      });
    }
  });
});

en de bijbehorende HTML wordt hieronder weergegeven. Ik gebruik COREUI , een fenomenale open source admin sjabloon en heeft ondersteuning voor vele frontkaders zoals hoekige, gewoon bootstrap , Hoek 4 enz.

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

Antwoord 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");

});

Voor meer details Klik hier!