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/

希望它能帮助！