부트 스트랩 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

루트 <ul> 요소에 active를 추가하는 경우, 모든 아이들이 active 클래스를 상속합니다. 만 CSS의 클래스 active와 li 요소를 선택에

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

을 할 수 있습니다.

Answer 2

프로그래밍 방식으로 자바 스크립트를 사용하여 요일을 계산하고 표시된 요일을 포함하는 요소에 "활성"속성을 추가 할 수 있습니다.

여기서 내가 지금까지 작업했던 스크립트가 :

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> 

, 나는 각 리 요소에 이름 속성을 추가했다. 나는 우리가 아래 스크립트에서 그것들을 사용할 것이기 때문에 이것을한다.

자바 스크립트 : 여기

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/

는 희망이 도움이!