it-swarm.com.de

Twitter Bootstrap fügt aktive Klasse zu li hinzu

Mit Twitter Bootstrap, und ich muss aktive Klasse in den li-Teil des Hauptnavigationssystems einleiten. Automagisch . Wir verwenden PHP nicht Ruby.

Beispiel nav:

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

Der Bootstrap-Code lautet wie folgt:

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

Sie müssen also nur herausfinden, wie Sie die aktive Klasse an die aktuelle Seite anhängen. Habe durch nahezu jede Antwort auf Stack geschaut, ohne wirkliche Freude.

Ich hatte damit gespielt:

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

Aber keine Freude.

55
422

Am Ende haben wir es geschafft:

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

Für 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');

Aktualisieren

Für 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');
126
Imtiaz

Sie benötigen kein JavaScript mit 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>

Um nach dem Auswählen des Menüelements weitere Aufgaben auszuführen, benötigen Sie JS, wie in den anderen Beiträgen beschrieben.

Hoffe das hilft.

30
Kam

wenn Sie setzen 

data-toggle="pill"

im tag sollte es automatisch funktionieren.

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

lesen Sie unter Markup

13
user2045474

Dies erledigte für mich die Arbeit einschließlich aktiver Haupt-Dropdowns und der aktiven Kinder (Dank an 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');
});
10

Wenn Sie ein MVC-Framework mit Routen und Aktionen verwenden:

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

Wie in dieser Antwort von Christian Landgren veranschaulicht: https://stackoverflow.com/a/13375529/101662

8
Oliver

Versuche dies. 

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

Das funktioniert gut für mich. Es markiert sowohl einfache Navi- als auch Dropdown-Nav-Elemente als aktiv.

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

Wenn Sie this.location.pathname an $('ul.nav a[href="'...'"]') übergeben, werden auch einfache Navigationselemente markiert. Das Weitergeben von url hat für mich nicht funktioniert.

3
Ilker Cat

Nur für den Fall, dass Sie Bootstrap in Angularjs verwenden: Dies ist eine einfache Anweisung, die für mich funktioniert (da das von Kam angegebene Daten-Toggle in Angular-ui nicht enthalten ist). Hoffnung kann helfen.

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

Die Lösung ist einfach und es ist keine Serverseite oder Ajax erforderlich. Sie benötigen lediglich jQuery und Bootstrap. Fügen Sie auf jeder Seite ein id zum body-Tag hinzu. Verwenden Sie diese id, um ein Tag zu finden, das den Seitennamen (Wert eines Tags) enthält. 

Beispiel:

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>

Vielen Dank an Ben! Youtube

1

Hier ist ein vollständiges Twitter-Bootstrap-Beispiel und die auf der Abfragezeichenfolge angewendete aktive Klasse.

Einige Schritte, um eine korrekte Lösung zu erreichen:

1) Fügen Sie die neueste jquery.js- und bootstrap.js-Javascript-Datei ein.

2) Enthält die neueste Datei bootstrap.css

3) Fügen Sie querystring-0.9.0.js ein, um den Wert der Abfragezeichenfolgenvariablen in js abzurufen.

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 im Skript Tag:

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

    });
});

Ich bin fertig bin, also klicken Sie bitte hier http://codebins.com/bin/4ldqpaf

0
gaurang171

Ich hatte das gleiche Problem, und dies ist, was ich in meinem App-Startskript hinzugefügt habe, und es funktionierte reibungslos. Hier ist das 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');
      });
    }
  });
});

Der entsprechende HTML-Code wird unten angezeigt. Ich benutze CoreUI , eine phänomenale Open-Source-Admin-Vorlage, und unterstützt viele Front-End-Frameworks wie Angular, plain Bootstrap, Angular 4 usw.

<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>
0
Krishna Vedula

Um die Menüs und Untermenüs auch bei Parametern in der URL zu aktivieren, verwenden Sie den folgenden 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');
    }
});

Dies akzeptiert URLs wie:

/ Beiträge
/Beiträge/1
/posts/1/bearbeiten

0
Seralto
$(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");

});

Für mehr Details Hier klicken!

0
Kanon Chowdhury

Nichts davon hat für mich gearbeitet. Mein Bootstrap-Setup navigiert zu separaten Seiten (daher kann ich es nicht mit einer Klickaktion tun, aber die aktive Klasse wird in der Navigation zu einer neuen Seite entfernt) und meine URLs stimmen nicht genau überein. Also, was ich getan habe, basierend auf meiner Ausnahme-basierten Situation. Hoffe es hilft anderen:

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

});
0
awvidmer