php - trabajar - como usar framework bootstrap

Hacer que el enlace de la barra de navegación de Twitter Bootstrap esté activo

Question

¿Cuál es la forma estándar de poner en negrita el enlace activo en una barra de navegación de Twitter Bootstrap? Está claro que un enlace gana la apariencia activa al obtener la clase "activa". Por ejemplo, el enlace de Home continuación está activo. Cuando hago clic en cualquier enlace de la barra de navegación, ¿debo usar jQuery para eliminar todas las clases de li elementos y luego agregar la clase active al enlace que identifiqué?

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

EDITAR : Incluí

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

después de los enlaces. La alerta aparece cuando hago clic en un enlace, pero la clase "activa" no se agrega al enlace.

Aquí está todo mi HTML barra de navegación:

<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

Agregue la siguiente secuencia de comandos en la parte inferior de la página:

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

Answer 2

Chris Moutray su respuesta me ayudó mucho en el desarrollo de mi software (estoy usando ZendFramework). Escribí este asistente de visualización:

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

    }   

}

En este caso, llamo a este ayudante en la vista por lo tanto:

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

¡¡Gracias!!

Answer 3

Debe asegurarse de configurar la clase activa como parte de la respuesta de la solicitud (a medida que se carga la página) y no antes, es decir, cuando el usuario haga clic en un enlace para solicitar una página diferente.

Primero debe determinar qué navlink debe establecer como activo y luego agregar la clase activa al <li> . El código se vería algo como esto

Probado por asker :

HTML dentro de un archivo php

Llame a una función php en línea dentro de la <li> pasa en la solicitud de destino de enlaces uri

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

Función de PHP

La función php simple necesita comparar el pedido pasado en uri y si coincide con la página actual que se muestra como salida de clase activa

<?php 

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

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

?>

Answer 4

Puedes probar:

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

Sin embargo, sería mejor otorgarle a su nav un atributo de id porque puede tener más de un navegador en una página con la clase de nav .

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

Alternativamente, en lugar de usar .css(''font-weight'', ''bold'') , puede poner esto en la hoja de estilo:

.active {
    font-weight: bold;
}

Answer 5

Puedes resolverlo con CSS.

Agregue una clase al cuerpo de cada página:

<body class="home">

O si estás en la página de contacto:

<body class="contact">

Luego, ten esto en cuenta cuando crees tus estilos:

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

Por último, aplique nombres de clase a sus elementos de lista:

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

Este punto, cuando estés en la página body.home, tu li.home tendrá un estilo predeterminado que indica que es la página actual.

Answer 6

Si asigna $ pageTitle al nombre de la página, puede hacerlo sin javascript

<ul class="nav navbar-nav">

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

Answer 7

Si no desea tratar con el lado del servidor y en el caso donde todos los hrefs son simples, como ''/page.php'', puede llamar

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

después de la página está cargada.

Answer 8

Simplemente coloque el siguiente código en la sección "head".

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

obviamente no olvides tu llamada a jquery.js antes.

Y tu:

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

Answer 9

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

Este tutorial tiene una gran y definitiva solución para este "problema". Estuve lidiando con eso hace un tiempo y trabajando muy bien para mí, personalizable también

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