부트 스트랩의 'aria-selected'값이 true가되면 탭 (Mathematic-tab)을 다른 href 색상으로 변경하고 싶습니다 (그래서 .style.color = gold를 넣을 수 없습니다). 현재 수학 탭이 하나 인 탭이 있고 기본적으로 선택한 탭과 선택되지 않은 탭을 구분하고 싶지만 부트 스트랩이 내가 모르는 Jquery를 사용하는 방법을 잘 모르겠습니다. 내 JS도 작동하지 않습니다.
let mathsTab = document.getElementById('Mathematics-tab');
if (mathsTab.getAttribute('aria-selected') == "true") {
console.log("true");
// mathsTab.style.color = #f0a500;
} else {
// mathsTab.style.color = #1A1C20;
};<ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active gold-text" id="Mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true">Mathematics</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a>
</li>
</ul>그런 뜻인가요?
let navItems = document.querySelectorAll('.nav-link');
navItems.forEach(item =>{
item.addEventListener("click", () => {
item.style.color = "#f0a500";
navItems.forEach(otherItem => {
if(otherItem !== item){
otherItem.style.color = "#1A1C20";
}
});
})
})<ul class="nav nav-tabs nav-fill justify-content-center mt-3" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active gold-text" id="Mathematics-tab" data-toggle="tab" href="#Mathematics" role="tab" aria-controls="Mathematics" aria-selected="true">Mathematics</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">English</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Verbal</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link gold-text" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Nonverbal</a>
</li>
</ul>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다