ブートストラップ3 nav-tabsアクティブなタブ現在の曜日

Question

activeに現在の曜日のliを追加するにはどうすればよいですか？

<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

ルート<ul>要素にactiveを追加した場合、すべての子どもたちがactiveクラスを継承します。

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

あなたは、あなたのCSSでクラスactiveとli要素を選択する

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

を行うことができます。

Answer 2

javascriptを使用して曜日を計算し、指定された曜日を含む要素に「アクティブ」属性を追加することでプログラム的に行うことができます。

ここでは、私がこれまで取り組んできたスクリプトを持っている：

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> 

が、私は各li要素にname属性を追加しました。私たちは下のスクリプトでそれらを使用するので、私はこれを行います。

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

、私は平日配列の助けを借りて、私たちの曜日の名前を与えるDateオブジェクトを作成しました。 曜日の名前を取得したら、dayOfTheWeekメソッドを呼び出します。このメソッドは、希望する要素（リストの平日）をアクティブに設定し、その色を赤に変えます（下のCSSコードを参照）。

CSS：ここ

li.active 
{ 
    color: red; 
} 

a.active 
{ 
    color: red; 
} 

我々は唯一の私たちは私たちの目的の要素をアクティブにしたときに何が起こるかを見るために2つのルールを作成しました。

あなたはここに私のコードを見つけることができます。https://jsfiddle.net/a0yjLc5z/6/

はそれが役に立てば幸い！