HTML元素的JavaScript更改類

我想根據系統日將class="filter"更改爲class="active filter"。我知道如何獲得系統日，但無法改變課程。任何人都可以幫助我嗎？HTML元素的JavaScript更改類

<li id="0"><a href="javascript:;" data-filter="all" class="active filter">All</a></li> 
<li id="1"><a href="javascript:;" data-filter=".monday" class="filter"> Monday</a></li> 
<li id="2"><a href="javascript:;" data-filter=".tuseday" class="fiter">Tuesday </a></li> 
<li id="3"><a href="javascript:;" data-filter=".wednesday" class="filter"> Wednesday</a></li> 
<li id="4"><a href="javascript:;" data-filter=".thursday" class="filter"> Thursday</a></li>

2017-09-06 Ryan Ali

–

Bad id的'Element.className'是JavaScript訪問。 – PHPglue

使用JavaScript更改類：

element.classList.add  // adds a class 
element.classList.remove // removes a class

你會遍歷所有的元素，並添加活動類到符合你係統日的那個。（您可以使用getAttribute('data-filter')與您的系統日子比較。）

var sysDay = 'monday'; 
 

 
var activeDay = function(sysDay) { 
 
    var days = document.getElementsByClassName('day'); 
 
    for (var i=0; i<days.length; i++) { 
 
    // remove active class 
 
    days[i].classList.remove('active'); 
 
    // add active class only if matches system day 
 
    if ((days[i].getAttribute("data-filter")) == sysDay) 
 
    { 
 
     days[i].classList.add('active'); 
 
    } 
 
    } 
 
} 
 

 
activeDay(sysDay);

.active { 
 
    color: red; 
 
}

<li id="0"><a href="javascript:;" data-filter="all" class="active filter day">All</a></li> 
 
<li id="1"><a href="javascript:;" data-filter="monday" class="filter day"> Monday</a></li> 
 
<li id="2"><a href="javascript:;" data-filter="tuseday" class="fiter day">Tuesday </a></li> 
 
<li id="3"><a href="javascript:;" data-filter="wednesday" class="filter day"> Wednesday</a></li> 
 
<li id="4"><a href="javascript:;" data-filter="thursday" class="filter day"> Thursday</a></li>

來源

2017-09-06 02:08:04

我不知道我做錯了什麼。非解決方案正在爲我工作。我想要做的是根據此頁面上的系統日選擇一天。 www.nightclubslondon.com/london_nightclubs.html ..請幫助我。 –

從系統返回的數據格式是什麼？你需要確保'data-filter'屬性的值完全匹配它。我發現'data-filter'的值是以一個句點開始的。你一定要刪除它，因爲它們不是有效的JavaScript變量。 –

非常感謝您的幫助。它的工作現在。 –

var listItem = document.getElementById('0') 
listItem.classList.toggle('active');

你或許應該改變你的IDS雖然

來源

2017-09-06 01:50:22 jafaircl

我不知道我在做什麼錯。沒有解決方案爲我工作。我想要做的是根據此頁面上的系統日選擇一天。 www.nightclubslondon.com/london_nightclubs.html –

<ul class="text-center"> 
<li id="1"><a href="#" data-filter=".monday" class="filter"> Monday</a></li> 
<li id="2"><a href="#" data-filter=".tuseday" class="fiter">Tuesday </a></li> 
<li id="3"><a href="#" data-filter=".wednesday" class="filter"> Wednesday</a></li> 
<li id="4"><a href="#" data-filter=".thursday" class="filter"> Thursday</a></li> 
<li id="5"><a href="#" data-filter=".friday" class="filter">Friday</a></li> 
<li id="6"><a href="#" data-filter=".saturday" class="filter"> Saturday</a></li> 
<li id="0"><a href="#" data-filter=".sunday" class="filter"> Sunday</a></li> 
</ul> 

<script> 
    ActiveDay(); 
    function ActiveDay() 
    { 
     var day = new Date().getDay(); 

     for (var i = 0; i < 7; i++) 
     { 
      $("#" + i + ">a").attr("class", "filter"); 
     } 

     $("#" + day + ">a").attr("class","active filter"); 
    } 

    </script>

來源

2017-09-06 02:03:03 TaBo

HTML元素的JavaScript更改類

回答

相關問題