Bootstrap 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

Если добавить 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 элементы с классом active в вашем CSS.

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. Я делаю это, потому что мы будем использовать их в нашем скрипте ниже.

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/

Надеется, что это помогает!