Bootstrap 3導航欄活動標籤當前星期幾

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

如果添加active到根<ul>元素，所有的孩子將繼承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> 

你可以做

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

，只選擇li元素在你的CSS類active。

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> 

正如你所看到的，我加入了name屬性給每個li元素。我這樣做是因爲我們將在下面的腳本中使用它們。

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

在這裏我們只創建了兩個規則，看看當我們做我們所期望的元素活躍的，會發生什麼。

你可以在這裏找到我的代碼：https://jsfiddle.net/a0yjLc5z/6/

希望它能幫助！