it-swarm.com.de

Aktive Klassenumschaltung von Twitter Bootstrap Tabs funktioniert nicht

Ich benutze Twitter-Bootstrap-Nav-Tabs und Nav-Pillen. Dies ist mein HTML-Code:

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

Wenn ich nun das Attribut data-toggle="pill" und data-toggle="tab" hinzufüge, ändern Sie die Registerkarte mit der aktiven Klasse in eine, auf die ich geklickt habe. href funktioniert jedoch nicht mehr. Wenn ich diese Klassen nicht verwende, funktioniert href, aber die aktive Klasse ändert sich nicht und es bleibt immer das Element, das diese Klasse beim Laden der Seite erhalten hat. 

Ich habe sogar versucht, mit jQuery das Klassenverhalten umzuschalten, und es funktioniert nicht so gut. Mein Skriptcode lautet:

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

Bootstrap-Navis und Pillen funktionieren mit einem JS-Plugin. Das Plugin wird auf die Seite geladen und kümmert sich um das Hervorheben und das Erinnern der aktuell aktiven Registerkarte oder Pille. Die href-Attribute werden deaktiviert, wenn sie mit anderen Seiten verknüpft sind. Wenn Sie auf einen Link zu einer anderen Seite klicken, wird eine neue Seite geladen. Der JS wird dann für diese neue Seite neu geladen und weiß nicht, welche Registerkarte oder welche Pille gerade aktiv ist. Sie sind so konzipiert, dass sie mit einzelnen Seiten-Apps oder Verknüpfungen zu Ankern auf derselben Seite arbeiten. Zu diesem Zweck funktionieren sie einwandfrei.

Der jQuery-Ansatz schlägt aus demselben Grund fehl, ist aber möglicherweise einfacher zu erklären.

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

Wenn Sie auf einen Link klicken, wechselt JS und ändert die Klasse nur dann, wenn vor dem Laden der nächsten Seite genügend Zeit zur Verfügung steht. Diese nächste Seite wird geladen, da das href-Attribut auf dem Link den Browser anweist, zu einer neuen zu navigieren Seite. Und die neue Seite lädt Ihre JS erneut. Sie kann sich nicht mehr an die Variablen der vorherigen Seite erinnern, z. B. welche Registerkarte oder Pille aktiv sein soll.

Wenn Sie zu anderen Seiten navigieren, können Sie auch die aktive Klasse auf der rechten Registerkarte für die bestimmte Seite festlegen, die gerade geladen wird.

Wenn Sie dies wirklich auf der Clientseite tun müssen, können Sie so etwas tun und es auf jeder Seite laden.

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

});

Die aktive Registerkarte wird auf der Grundlage des letzten Teils der URL festgelegt. Sie ist jedoch abhängig von Ihrem Szenario (und zuvor von meinem Szenario). Sie müssten es anpassen, wenn Dateierweiterungen oder Abfrageparameter beteiligt sind. Jede Seite muss mindestens einen Link zu sich selbst haben. Und es hat vorzugsweise die gleiche Kopfzeile mit den gleichen Tabs und Pillen wie alle anderen Seiten.

Beide letzten Punkte bringen mich erneut auf den Gedanken: "Wenn Sie so viel Kontrolle darüber haben müssen, was genau auf die Seite gerendert wird, haben Sie wahrscheinlich Zugriff auf die Serverseite", und wenn dies der Fall ist, könnten Sie dies tun behebt es auch dort, da jeder Link trotzdem eine neue Anfrage an den Server stellt. Und Ihre Lösung muss sich nicht auf ein nicht so robustes JavaScript verlassen, um zu funktionieren.

Das war also das, was ich zu einem bestimmten Zeitpunkt getan habe, Sie könnten es verbessern oder eine Lösung implementieren, bei der Sie einige Daten auf der nächsten Seite veröffentlichen und diese dort mit JavaScript lesen (was wahrscheinlich einfacher und robuster wäre, wenn Sie Dateierweiterungen oder Abfragezeichenfolgen, mit denen gearbeitet werden soll).

Viel Glück damit! :)

28

Folgendes ist zu beachten: Wenn jedes li-Element einen anderen Controller verwendet, können Sie Folgendes versuchen.

Wie bekomme ich eine Twitter-Bootstrap-Navigation, um den aktiven Link anzuzeigen?

Ihr Code könnte ungefähr so ​​aussehen:

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

Dieses Beispiel hat für mich funktioniert:

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

Während dieses Beispiel nicht funktionierte

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

Das Entfernen von .parent ("li") hat geholfen.

1
user3941146

Ich folgte der Lösung von @syeh und habe es richtig gemacht. Nachfolgend finden Sie einen Ausschnitt aus meinem Code.

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

Ich hatte ein ähnliches Problem: Wenn Sie auf diese Schaltfläche klicken, werden Registerkarten aktiv, die active-Klasse wird jedoch nicht ordnungsgemäß von anderen Registerkarten entfernt (d. H. Jede Registerkarte, die der Benutzer auf eine Seitenansicht klickte, hätte die active-Klasse).

Beim Umschalten von einem <ol> auf einen <ul> verhalten sich die Registerkarten ordnungsgemäß.

0
praniclift

Dies ist eine allgemeinere clientseitige Lösung, die jQuery verwendet. Es wird lediglich davon ausgegangen, dass Ihre Registerkarten über das Data-Toggle-Attribut verfügen und jede Gruppe von Registerkarten in eine Art Containerelement eingeschlossen ist.

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