mit jquery enthält, um ein Element zu erhalten und Klasse

Question

Ich versuche, dynamische Navigation zu erstellen. Wenn die Bildschirmgröße die eines Telefons ist, verwende ich eine Bootstrap-Listengruppe, aber wenn ich die Größe verändere, benutze ich Nav-Pillen. Was ich versuche, ist das aktuelle Element mit der aktiven Klasse zu erfassen, so dass, wenn ich die Größe des Fensters ändere, es die Klasse "aktiv" hinzufügt, zu welcher ever-Tag den in der Variablen currentTab gespeicherten Text enthält. Zur Zeit weiß ich, dass ich die changeActive-Funktion eingabe und den Text habe, aber ich kann die aktive Klasse nicht hinzufügen.

<div id='navigation'> 
    <div class="list-group"> 
    <a href="#" class="list-group-item active">About</a> 
    <a href="#" class="list-group-item">Animals</a> 
    <a href="#" class="list-group-item">Adoptly</a> 
    <a href="#" class="list-group-item">Blog</a> 
    <a href="#" class="list-group-item">Events</a> 
    </div> 
</div><!--End of navigation--> 

Javascript

$(document).ready(function() { 
    var listHTML = '<div class="list-group"><a href="#" class="list-group-item active">About</a><a href="#" class="list-group-item">Animals</a><a href="#" class="list-group-item">Adoptly</a><a href="#" class="list-group-item">Blog</a><a href="#" class="list-group-item">Events</a></div>' 
    var pillsHTML ='<ul class="nav nav-pills"><li role="presentation" class="active"><a href="#">About</a></li><li role="presentation"><a href="#">Animals</a></li><li role="presentation"><a href="#">Adoptly</a></li><li role="presentation"><a href="#">Blog</a></li><li role="presentation"><a href="#">Events</a></li></ul>' 

function checkWidth() { 
    var windowsize = $(window).width(); 
    var current = document.getElementsByClassName('active'); 
    var displayText = current[0].textContent; 

    if (windowsize > 425) { 
     //if the window is greater than 440px wide then turn on jScrollPane.. 
     $("#navigation").empty(); 
     $("#navigation").html(pillsHTML); 
     checkActive(displayText); 
    } 
    else 
     { 
      $("#navigation").empty(); 
      $("#navigation").html(listHTML); 
      checkActive(displayText); 
     } 
} 

function checkActive(currentTab){ 
    console.log(currentTab); 
    $('a:contains(currentTab)').addClass('active'); 
} 

checkWidth(); 
// Bind event listener 
$(window).resize(checkWidth); 

$('#navigation').on('click','.list-group-item',function(e){ 
var previous = $(this).closest(".list-group").children(".active"); 
previous.removeClass('active'); // previous list-item 
$(e.target).addClass('active'); // activated list-item 
}); 
}); 

habe ich eine andere Lösung andere als die Verwendung enthält, so werde ich es hier posten, damit die Leute wissen, dass ich weitergezogen, aber wenn jemand tatsächlich hat eine Lösung mit enthält, werde ich zurück überprüfen, um als Lösung zu wählen.

function checkWidth() { 
    var windowsize = $(window).width(); 
    var current = document.getElementsByClassName('active'); 
    var displayText = current[0].textContent; 

    if (windowsize > 425) { 
     //if the window is greater than 440px wide then turn on jScrollPane.. 
     $("#navigation").empty(); 
     $("#navigation").html(pillsHTML); 
     checkActive(displayText,true); 
    } 
    else 
     { 
      $("#navigation").empty(); 
      $("#navigation").html(listHTML); 
      checkActive(displayText,false); 
     } 
} 

function checkActive(currentTab, bool){ 
    console.log(bool); 
    if(bool) 
     { 
      $('li').removeClass('active'); 
      var element = document.getElementById(currentTab); 
      $(element).addClass('active'); 
     } 
    else 
     { 
      $('.list-group-item').removeClass('active'); 
      var element = document.getElementById(currentTab); 
      $(element).addClass('active'); 
     } 
} 

Answer 1

sah ich Ihren Code und ich denke, dass es ein Missverständnis ist, werden Sie Ihre Funktionen nur verwenden, wenn das Dokument fertig ist, so dass Ihre Funktion $(window).resize() sein Lauf nur ein einziges Mal (wenn das DOM geladen ist), auch wenn Sie Größe ändern die Fenster das DOM ändert sich nicht, seit Sie die Seiten neu laden und in diesem Moment laufen Ihre Funktionen, aber gleichzeitig verliert Ihr aktives Element und die Seite wird das Standardelement auswählen, also schlage ich vor, die Funktion zu verwenden:

$(window).resize(function() { 
    //console.log("window size"+$(window).width()); 
    //Here your code that change each time that you resize your window 
}); 

Ich denke, Sie möchten eine Antwort Design-Seite erstellen, die noch einfacher ist nur CSS hinzufügen und mit boo Tstrap-Funktionen, kombinieren Sie einfach @media(max-min width) und fügen Sie eine collapse boostrap, dies ist ein klares Beispiel dafür: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_band_complete&stacked=h