Rendre le lien de la barre de navigation Twitter Bootstrap actif

Question

Quelle est la norme de façon à rendre le lien actif dans un compte Twitter Bootstrap barre de navigation en gras? Il est clair qu'un lien gains de l'actif apparence pour obtenir le "active" de la classe. Par exemple, l' Home lien ci-dessous est active. Lorsque je clique sur un lien dans la barre de navigation, si un usage jQuery pour supprimer toutes les classes de li éléments, puis ajouter l' active classe pour le lien que j'ai identifié?

<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: j'ai inclus

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

après les liens. L'alerte s'affiche lorsque je clique sur un lien, mais le "active" de la classe n'est pas ajouté le lien.

Ici, tout est de ma barre de navigation 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>

Answer 1

Vous devez vous assurer que vous définissez l' actif de la classe dans le cadre de la réponse à la requête (comme le chargement de la page) et pas avant c'est à dire quand l'utilisateur clique sur un lien pour demander une autre page.

Vous devez d'abord déterminer qui navlink devrait être définie comme active, puis ajouter l' actif de la classe à l' <li>. Le code devrait ressembler à quelque chose comme ceci

Testé par le demandeur:

HTML dans les fichiers php

Appeler une fonction php inline dans l' <li> de balisage en passant dans les liens de destination uri de la demande

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

Fonction PHP

La fonction php besoins simples de comparer le passé dans l'uri de la demande et si elle correspond à la page en cours en cours de rendu de la sortie active de la classe

<?php 

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

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

?>

Answer 2

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

Ce tutoriel a une excellente solution pour ce "problème". Je m'occupais de cela il y a un moment et je travaillais très bien, personnalisable aussi

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

Answer 3

Si vous ne voulez pas traiter avec le côté serveur et dans le cas où tous les hrefs sont simples, comme '/page.php', vous pouvez appeler

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

après le chargement de la page.

Answer 4

Tu peux essayer:

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

Cependant, il serait préférable d'attribuer votre attribut nav id , car vous pouvez avoir plus d'un navigateur sur une page avec la classe nav .

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

Alternativement, au lieu d'utiliser .css('font-weight', 'bold') , vous pouvez simplement mettre ceci dans la feuille de style:

 .active {
    font-weight: bold;
}
 

Answer 5

Chris Moutray, votre réponse m'a beaucoup aidé dans le développement de mon logiciel (j'utilise ZendFramework). J'ai écrit cet assistant de vue:

 <?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"';

    }   

}
 

Dans ce cas, j'appelle cette aide dans la vue ainsi:

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

Merci!!