Bootstrap 3 nav-tabs active tab ein aktueller Wochentag

Question

Wie kann ich activeli einen aktuellen Wochentag hinzufügen?

<ul class="nav nav-tabs nav-justified responsive" id="myTab"> 
<li class="active"><a href="#resp-tab1">Monday</a></li> 
<li><a href="#resp-tab2">Tuesday</a></li> 
<li><a href="#resp-tab3">Wednesday</a></li> 
<li><a href="#resp-tab4">Thursday</a></li> 
<li><a href="#resp-tab5">Friday</a></li> 
</ul> 

Answer 1

Wenn Sie active zur Wurzel <ul> Element hinzufügen, werden alle Kinder die active Klasse erben.

<ul class="nav nav-tabs nav-justified responsive active" id="myTab"> 
<li><a href="#resp-tab1">Monday</a></li> 
<li><a href="#resp-tab2">Tuesday</a></li> 
<li><a href="#resp-tab3">Wednesday</a></li> 
<li><a href="#resp-tab4">Thursday</a></li> 
<li><a href="#resp-tab5">Friday</a></li> 
</ul> 

Sie können

li.active { 
    /* your CSS goes here */ 
} 

tun nur li Elemente mit der Klasse active in Ihrem CSS auswählen.

Answer 2

Sie können dies programmatisch mit Javascript tun, indem Sie den Tag berechnen und das Attribut "active" zu dem Element hinzufügen, das den angegebenen Wochentag enthält.

Hier haben Sie das Skript ich bisher gearbeitet habe:

HTML:

<ul class="nav nav-tabs nav-justified responsive" id="myTab"> 
<li name="Monday"><a href="#resp-tab1">Monday</a></li> 
<li name="Tuesday"><a href="#resp-tab2">Tuesday</a></li> 
<li name="Wednesday"><a href="#resp-tab3">Wednesday</a></li> 
<li name="Thursday"><a href="#resp-tab4">Thursday</a></li> 
<li name="Friday"><a href="#resp-tab5">Friday</a></li> 
<li name="Saturday"><a href="#resp-tab4">Saturday</a></li> 
<li name="Sunday"><a href="#resp-tab5">Sunday</a></li> 
</ul> 

Wie Sie sehen können, habe ich den Namen Attribut zu jedem li Element. Ich mache das, weil wir sie in unserem Skript unten verwenden werden.

Javascript:

var d = new Date(); 
var weekday = new Array(7); 
weekday[0] = "Sunday"; 
weekday[1] = "Monday"; 
weekday[2] = "Tuesday"; 
weekday[3] = "Wednesday"; 
weekday[4] = "Thursday"; 
weekday[5] = "Friday"; 
weekday[6] = "Saturday"; 

var n = weekday[d.getDay()]; 

var daysOfTheWeek = document.getElementsByTagName("li"); 

dayOfTheWeek(daysOfTheWeek); 

function dayOfTheWeek (weekDays) { 
    for(var i = 0; i < weekDays.length; i++) 
    { 

    if(weekDays[i].getAttribute("name") == n) 
    { 
     weekDays[i].className = 'active'; 
     weekDays[i].childNodes[0].className = 'active'; 
    } 
    } 
} 

Hier habe ich ein Date-Objekt, das uns den Namen des Tages der Woche mit Hilfe der Wochentag Array geben. Sobald wir den Namen des Wochentags haben, rufen wir die Methode dayOfTheWeek auf, die die gewünschten Elemente aktiviert (den Wochentag der Liste) und ihre Farbe in Rot umwandelt (siehe CSS-Code unten).

CSS:

li.active 
{ 
    color: red; 
} 

a.active 
{ 
    color: red; 
} 

Hier haben wir erstellt nur zwei Regeln, um zu sehen, was passiert, wenn wir unser gewünschtes Element zu aktivieren.

Sie können meinen Code finden Sie hier: https://jsfiddle.net/a0yjLc5z/6/

Hoffe, es hilft!