[英]JavaScript change class of HTML element
I want to change the class="filter"
to class="active filter"
depending on the system day. 我想根据系统日期将
class="filter"
更改为class="active filter"
。 I know how to get the system day but am unable to change the class. 我知道如何获得系统日,但无法更改课程。 Can anyone help me please on this?
有人可以帮我吗?
<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>
To change the class with JavaScript: 要使用JavaScript更改类,请执行以下操作:
element.classList.add // adds a class
element.classList.remove // removes a class
You would loop over the elements, and add the active class to the one that matches your system day. 您将遍历元素,然后将活动类添加到与系统日期匹配的类中。 (You can use
getAttribute('data-filter')
to compare with your system day.) (您可以使用
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>
var listItem = document.getElementById('0')
listItem.classList.toggle('active');
You should probably change your ids though 您可能应该更改ID
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.