我有一个导航过滤器,单击该导航过滤器时,将根据它们所属的类别来突出显示每个项目。我希望在单击#all-btn时,所有项目都将突出显示其各自的颜色。现在,它们将设置为突出显示黑色,但我想对此进行更改。例如,
平面设计将为绿色,网页设计将为红色,平面设计将为蓝色。
我认为jQuery中的if / then语句可以实现此目的,但不确定如何进行构架。IE
if (the item has class graphic) {
$("#projects").find("li.graphic").toggleClass("highlight-graphic");
}
else if (item has class web) {
$("#projects").find("li.web").toggleClass("highlight-web");
}
else {
$("#projects").find("li.flat").toggleClass("highlight-flat");
}
什么是设置此功能的好方法,这项功能会起作用吗?
您可以为选项卡元素提供自定义data-*
属性。在这种情况下,data-target
属性。
<ul>
<li class="default-btn" data-target="wrap" id="all-btn">All</li>
<li class="default-btn" data-target="web" id="web-btn">WEB DESIGN</li>
<li class="default-btn" data-target="graphic" id="graphic-btn">GRAPHIC DESIGN</li>
<li class="default-btn" data-target="flat" id="flat-btn">FLAT DESIGN</li>
</ul>
然后,您可以将所有jQuery简化为以下内容:
$('li.default-btn').on('click', function () {
$('#projects').find('.wrap.' + this.dataset.target).toggleClass('selected');
});
由于您仅切换selected
类,因此还可以将CSS简化为以下内容:
.web.selected {
border: 3px solid red;
}
.graphic.selected {
border: 3px solid green;
}
.flat.selected {
border: 3px solid blue;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句