Bootstrap 3 nav-tabs 活动选项卡的当前日期答案

【问题标题】：Bootstrap 3 nav-tabs active tab a current day of weekBootstrap 3 nav-tabs 活动选项卡的当前日期
【发布时间】：2016-12-27 14:47:31
【问题描述】：

如何将课程 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>

【问题讨论】：

标签： tabs nav dayofweek

【解决方案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 元素。

【讨论】：

【解决方案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 对象，它将在 weekday 数组的帮助下为我们提供星期几的名称。一旦我们有了工作日的名称，我们就调用 dayOfTheWeek 方法，它将激活我们想要的元素（列表的工作日），将其颜色变为红色（参见下面的 CSS 代码）。

CSS：

li.active
{
  color: red;
}

a.active
{
  color: red;
}

这里我们只创建了两个规则来看看当我们激活我们想要的元素时会发生什么。

你可以在这里找到我的代码：https://jsfiddle.net/a0yjLc5z/6/

希望对你有帮助！

【讨论】：

是的，我通过 javascript 知道，你知道这个脚本或库吗？谢谢