jquery - mis - La pestaña activa de la pestaña de inicio de Twitter no funciona

como buscar mis contactos en twitter iphone

Question

Estoy usando las pestañas de navegación de inicio y las píldoras de navegación de Twitter. Este es mi código html:

<div class="Header2" style="background-color:#1E3848">
    <div id="headerTab">
        <ul class="nav nav-tabs">
            <li class="active ans-tab"> <a href="http://myweb.com/">Home</a></li>
            <li class="topTab"><a href="http://myweb.com/score/">Score</a></li>
            <li class="topTab"><a href="http://myweb.com/leaderboards/">Leaderboards</a></li>
        </ul>
    </div>
    <div id="subHeaderTabPlayer">
        <ul class="nav nav-pills">
            <li class="active"> <a href="http://myweb.com/">Top</a></li>
            <li><a href="http://myweb.com/rules/" data-toggle="pill">Rules</a></li>
            <li><a href="http://myweb.com/player/" data-toggle="pill">Player</a></li>
            <li><a href="http://myweb.com/categories/" data-toggle="pill">Categories</a></li>
        </ul>
    </div>
</div>

Ahora, si agrego el atributo data-toggle="pill" y data-toggle="tab" la pestaña con el cambio de clase activo a uno en el que he hecho clic. Sin embargo, href ya no funciona. Si no uso estas clases, href funciona pero la clase activa no cambia y siempre se mantiene en el elemento que la clase recibió en la carga de la página.

Incluso intenté usar jQuery para cambiar el comportamiento de la clase y no funciona tan bien. Mi código de script es:

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(window).load(function(){
        document.getElementById( ''subHeaderTabPlayer'' ).style.display = ''none'';
        $(''ul.nav-tabs li a'').click(function (e) {
            var activeTab= document.getElementByClass(''active'');
            activeTab.removeAttribute("class");

            $(''ul.nav-tabs li.active'').removeClass(''active'')
            $(this).parent(''li'').addClass(''active'')
        })
        $(''ul.nav-pills li a'').click(function (e) {
            $(''ul.nav-pills li.active'').removeClass(''active'');
            $(this).parent(''li'').addClass(''active'');
        })
        $(".ans-tab").click(function() {
            document.getElementById(''subHeaderTabPlayer'').style.visibility = ''visible'';
            document.getElementById(''subHeaderTabPlayer'' ).style.display = ''block'';
        });
        $(".topTab").click(function() {
            document.getElementById(''subHeaderTabPlayer'').style.visibility = ''collapse'';
            document.getElementById(''subHeaderTabPlayer'' ).style.display = ''none'';
        });
    });
</script>

Answer 1

Algo a considerar: si cada elemento li usa un controlador diferente, aquí hay algo que podrías probar.

¿Cómo obtener la navegación de Twitter-Bootstrap para mostrar el enlace activo?

Tu código podría verse algo como esto:

<ul class="nav nav-pills">
  <li class="<%= ''active'' if params[:controller] == ''home'' %>"> <a href="link" data-toggle="pill">Top</a></li>
  <li class="<%= ''active'' if params[:controller] == ''rules'' %>"><a href="link" data-toggle="pill">Rules</a></li>
  <li class="<%= ''active'' if params[:controller] == ''player'' %>"><a href="link" data-toggle="pill">Player</a></li>
  <li class="<%= ''active'' if params[:controller] == ''categories'' %>"><a href="link" data-toggle="pill">Categories</a></li>
</ul>

Answer 2

Esta es una solución del lado del cliente más generalizada utilizando jQuery. Solo asume que las pestañas tienen el atributo de alternar datos y que cada grupo de pestañas está envuelto en algún tipo de elemento contenedor.

$(''[data-toggle="tab"],[data-toggle="pill"]'').click(function() { 
    $(this).parent().children(''.active[data-toggle="tab"],.active[data-toggle="pill"]'').removeClass(''active''); 
    $(this).addClass(''active''); 
});

Answer 3

Estaba teniendo un problema similar: cuando hacían clic, las pestañas se activaban pero no eliminaban la clase active de otras pestañas (es decir, cada pestaña que el usuario hacía clic en una visita de página tenía la clase active ).

El cambio de un <ol> a un <ul> hizo que las pestañas se comportaran correctamente.

Answer 4

Este ejemplo funcionó para mí:

$leftBlock.on("click", "#navFinished", function(){
  $(''ul.nav-pills li.active'').removeClass(''active'');
  $(this).addClass(''active'');
});

Si bien este ejemplo no funcionó

$leftBlock.on("click", "#navFinished", function(){
  $(''ul.nav-pills li.active'').removeClass(''active'')
  $(this).parent(''li'').addClass(''active'')
})

Eliminar .parent ("li") ayudó.

Answer 5

Las pestañas y pastillas de navegación de Bootstrap funcionan con un complemento JS. El complemento se carga en la página y se encarga de resaltar y recordar la pestaña o píldora activa en ese momento. Desactiva los atributos href si se vinculan a otras páginas, simplemente porque al hacer clic en un enlace a otra página, se carga una nueva página. El JS se vuelve a cargar para esta nueva página, y no sabe qué pestaña o píldora está activa actualmente. Están diseñados para funcionar con aplicaciones de una sola página o enlaces a anclajes en la misma página, y funcionan bien para ese propósito.

El enfoque jQuery falla por la misma razón, pero puede ser más fácil de explicar.

$(''ul.nav-pills li a'').click(function (e) {
  $(''ul.nav-pills li.active'').removeClass(''active'')
  $(this).parent(''li'').addClass(''active'')
})

Al hacer clic en un enlace, JS se apaga y cambia la clase, solo si tiene tiempo suficiente para hacerlo antes de que se cargue la siguiente página, esta página se carga porque el atributo href en el enlace le dice al navegador que navegue a un nuevo página. Y la nueva página carga tu JS de nuevo, posiblemente no pueda recordar las variables de la página anterior, como qué pestaña o píldora debe estar activa.

Si va a navegar a otras páginas, también puede establecer la clase activa en la pestaña derecha para la página específica que se está cargando.

Si realmente necesita hacer esto en el lado del cliente, podría hacer algo como esto y cargarlo en cada página.

$(document).ready(function () {

  // Set BaseURL
  var baseURL = ''http://myweb.com/''

  // Get current URL and replace baseURL
  var href = window.location.href.replace(baseURL, '''');

  // Remove trailing slash
  href = href.substr(-1) == ''/'' ? href.substr(0, href.length - 1) : href;

  // Get last part of current URL
  var page = href.substr(href.lastIndexOf(''/'') + 1);

  // Add trailing slash if not empty (empty means we''re currently at baseURL)
  page = page != '''' ? page + ''/'' : page;

  // Select link based on href attribute and set it''s closest ''li'' to ''active''. 
  // .siblings(''.active'').removeClass() is only needed if you have a default ''active li''.
  $(''a[href="'' + baseURL + page + ''"]'', ''.nav li'').closest(''li'').addClass(''active'').siblings(''.active'').removeClass();

});

Establece la pestaña activa en función de la última parte de la URL, aunque es algo específico para su escenario (y anteriormente mi escenario). Tendría que adaptarlo si hubiera extensiones de archivo o parámetros de consulta involucrados. Cada página debe tener al menos un enlace a sí mismo en ella. Y preferiblemente tiene exactamente el mismo encabezado con las mismas pestañas y píldoras representadas en él como todas las demás páginas.

Estos dos últimos puntos vuelven a plantear el pensamiento en mi mente "si tiene que tener tanto control sobre lo que se está representando exactamente en la página, probablemente tenga acceso al lado del servidor", y si ese es el caso, podría así como arreglarlo allí, ya que todos los enlaces hacen una nueva solicitud al servidor de todos modos. Y su solución no tendría que depender de algún JavaScript no tan robusto para funcionar.

Así que esto es lo que había hecho en una etapa, podría mejorarlo o implementar una solución en la que publique algunos datos en la página siguiente y lo lea con JavaScript allí (lo que probablemente sería más fácil y más robusto si tuviera extensiones de archivos o cadenas de consulta para tratar con).

¡Suerte con ello! :)

Answer 6

Seguí la solución @syeh y lo hice bien. A continuación se muestra un fragmento de mi código.

<ul class="nav nav-pills">
   <li <?php if (strchr($this->pageTitle,'' Job'') === '' Job'') echo ''class=active'';?>><?php echo CHtml::link(''JOBS'', array(''Job/index''));?></li>
   <li <?php if (strchr($this->pageTitle,''Artisan'') === ''Artisan'') echo ''class=active'';?>><?php echo CHtml::link(''ARTISANS'', array(''Artisan/index''));?></li>
   <li <?php if (strchr($this->pageTitle,''Task'') === ''Task'') echo ''class=active'';?>><?php echo CHtml::link(''TASKS'',array(''Task/index''));?></li>
</ul>

Answer 7

<?php
function activate($uri) {
    if ($_SERVER[''REQUEST_URI''] == $uri) {
        echo '' class="active" '';
    }
}

?>

<nav>
    <ul class="nav nav-tabs">
      <li role="tab" <?php activate(''/wikireport/index.php''); ?> ><a href="index.php" aria-controls="Home">Wiki Report</a></li>
      <li role="tab" <?php activate(''/wikireport/examples.php''); ?> ><a href="examples.php" aria-controls="Examples">Examples</a></li>
      <li role="tab" <?php activate(''/wikireport/about.php''); ?> ><a href="about.php" aria-controls="About">About</a></li>
    </ul>
</nav>

Y luego en el archivo de "contenido", solo requiere / incluye tu navline.php

<?php 
include(''navline.php''); 
?>