it-swarm.com.de

Aktivieren Sie den Twitter Bootstrap-Navigationsleisten-Link

Wie wird der aktive Link in einer Twitter-Bootstrap-Navigationsleiste standardmäßig angezeigt? Es ist klar, dass ein Link das aktive Aussehen erhält, indem er die "aktive" Klasse erhält. Beispielsweise ist der unten stehende Link Home aktiv. Wenn ich auf einen Link in der Navigationsleiste klicke, sollte ich mit jQuery alle Klassen aus li-Elementen entfernen und dann die active-Klasse zum Link hinzufügen, den ich angegeben habe? 

<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

EDIT: Ich habe aufgenommen

<script type="text/javascript">
$('.nav li a').on('click', function() {
    alert('clicked');
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active');
});
</script>

nach den links. Die Warnung wird angezeigt, wenn ich auf einen Link klicke, aber die "aktive" Klasse wird dem Link nicht hinzugefügt.

Hier ist alles meine Navbar-HTML:

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">AuctionBase</a>
            <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="home.php">Search</a></li>
                        <li><a href="about.php">About</a></li>
                    </ul>
            </div>
        </div>
    </div>
</div>
38
Rose Perrone

Sie müssen sicherstellen, dass Sie die Klasse active als Teil der Anforderungsantwort (beim Laden der Seite) festlegen, und nicht bevor der Benutzer auf einen Link klickt, um eine andere Seite anzufordern.

Zuerst müssen Sie ermitteln, welche navlink als aktiv gesetzt werden soll, und dann die active -Klasse zum <li> hinzufügen. Der Code würde ungefähr so ​​aussehen

Vom Fragesteller getestet :

HTML in PHP-Datei

Rufen Sie eine PHP-Funktion inline in der <li>-Markierung auf, die in der Link-Zielanforderung uri übergeben wird

<ul class="nav">
    <li <?=echoActiveClassIfRequestMatches("home")?>>
        <a href="home.php">Search</a></li>
    <li <?=echoActiveClassIfRequestMatches("about")?>>
        <a href="about.php">About</a></li>
</ul>

PHP Funktion

Die PHP-Funktion simple muss den übergebenen Anforderungs-URI miteinander vergleichen und mit der aktuellen Seite, die gerade ausgegeben wird, der Klasse active entsprechen

<?php 

function echoActiveClassIfRequestMatches($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

    if ($current_file_name == $requestUri)
        echo 'class="active"';
}

?>
40
Chris Moutray

http://totalprogus.blogspot.sk/2013/12/bootstrap-add-active-class-to-li.html

Dieses Tutorial bietet eine großartige und ultimative Lösung für dieses "Problem". Ich habe mich vor einiger Zeit damit beschäftigt und arbeitete großartig für mich, auch anpassbar

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

Wenn Sie sich nicht mit der Serverseite befassen möchten und alle Hrefs wie '/page.php' einfach sind, können Sie anrufen 

$('.your-nav-container').find('a[href="' + location.pathname + '"]').parents('li').addClass('active');

nachdem die Seite geladen ist.

10
vtk13

Du kannst es versuchen:

$('.nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active').css('font-weight', 'bold');
});

Es ist jedoch am besten, wenn Sie Ihrer nav ein id-Attribut zuweisen, da sich auf einer Seite mit der nav-Klasse möglicherweise mehr als ein Navis befindet.

$('#main-nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active').css('font-weight', 'bold');
});

Statt .css('font-weight', 'bold') zu verwenden, können Sie dies einfach in das Stylesheet einfügen:

.active {
    font-weight: bold;
}
9
Chris Clower

Fügen Sie am Ende der Seite das folgende Skript hinzu:

<script>
    $(document).ready(function() {
        var url = this.location.pathname;
        var filename = url.substring(url.lastIndexOf('/')+1);
        $('a[href="' + filename + '"]').parent().addClass('active');
    });
</script>
3
meda

Chris Moutray Ihre Antwort hat mir sehr bei der Entwicklung meiner Software geholfen (ich verwende ZendFramework). Ich habe diesen View-Helfer geschrieben:

<?php

class Zend_View_Helper_ActiveOrNot {

    function activeOrNot ( $requestUri ) { 

        $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

        if ($current_file_name == $requestUri)

            echo 'class="active"';

    }   

}

In diesem Fall nenne ich diesen Helfer in der Ansicht so:

<?php $this -> activeOrNot ( "public" );

Danke dir!!

2
delor34n

Sie können es mit CSS lösen.

Fügen Sie dem Hauptteil jeder Seite eine Klasse hinzu:

<body class="home">

Oder wenn Sie sich auf der Kontaktseite befinden:

<body class="contact">

Berücksichtigen Sie dies beim Erstellen Ihrer Stile:

ul li:hover, body.home a.home, body.contact a.contact { background-color: #000; } 
ul li:hover a, body.home li.home a, body.contact li.contact a { color: #fff; }

Wenden Sie schließlich die Klassennamen auf Ihre Listenelemente an:

<ul>
  <li class="home"><a href="index.php">Home</a></li>
  <li class="contact"><a href="contact.php">Contact Us</a></li>
  <li class="about"><a href="about.php">About Us</a></li>
</ul>

Wenn Sie sich auf der body.home-Seite befinden, wird Ihr linker Link standardmäßig mit einem Standardstil versehen, der angibt, dass es sich um die aktuelle Seite handelt.

Wenn Sie dem Seitennamen $ pageTitle zuweisen, können Sie dies ohne Javascript tun

<ul class="nav navbar-nav">

      <li <?php if ($pageTitle == "Website Development") {echo 'class="active"';} ?>>
      <a href="website-development.php">
       Web Development
      </a>
      </li>...</ul>
0
GoodViber

Setzen Sie einfach den untenstehenden Code in den Abschnitt "head".

<script type="text/javascript">
$(document).ready(function () {
$("li a[href='" + location.href.substring(location.href.lastIndexOf("/") + 1, 255) + "']").addClass("active");
});
</script>

vergiss natürlich nicht, dass du jquery.js vorher aufgerufen hast.

Und dein:

<style>
.active{something...}
</style>
0
JBarros