Bootstrap 3 Nav-Tabs Active Tab的当前一天

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 */
}

仅在您的CSS中使用类active选择li元素。

Answer 2

您可以使用JavaScript进行程序进行编程，计算一天并将" Active"属性添加到包含指示的一周一天的元素中。

在这里您到目前为止一直在工作的脚本：

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元素中。我这样做是因为我们将在下面的脚本中使用它们。

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

在这里，我创建了一个日期对象，该对象将在工作日阵列的帮助下为我们提供一周的名字。一旦有了工作日的名称，我们将称呼Dayoftheekeek方法，该方法将设置我们想要的元素（列表的工作日），将其颜色变成红色（请参见下面的CSS代码）。

CSS：

li.active
{
  color: red;
}
a.active
{
  color: red;
}

在这里，我们仅创建了两个规则，以查看使所需元素活动活动时会发生什么。

您可以在此处找到我的代码：https：//jsfiddle.net/a0yjlc5z/6/

希望它有帮助！