JQ为元素添加class

html部分

<div class="tab-classify">

<ul>
<li>按钮1</li>
<li>按钮2</li>
<li>按钮3</li>
<li>按钮4</li>
<li>按钮5</li>
<li>按钮6</li>
<li>按钮7</li>
<li>按钮8</li>
<li>按钮9</li>
<li>按钮10</li>
</ul>

</div>

JS部分

//按钮背景颜色
var btnBg = ['#FFF7ED', '#F2F7FF', '#FFF4EE', '#ECFFF4', '#F0F6FF', '#FFF3EB', '#FFF8E3', '#FCF2FF', '#F1F4F8', '#F5F5F5'];
//按钮边框颜色
var border = ['0.01rem solid #F99738', '0.01rem solid #256FDF', '0.01rem solid #F17109', '0.01rem solid #12BA58', '0.01rem solid #387ADE', '0.01rem solid #FF4F19', '0.01rem solid #FFAE00', '0.01rem solid #B52FD6', '0.01rem solid #6F94C3', '0.01rem solid #A5A5A5'];
//按钮字体颜色
var fontColor = ['#FF5400', '#1461FF', '#F11909', '#02A757', '#2737C5', '#FF192F', '#F37800', '#B127D3', '#1D60B5', '#303030'];

for (i=0;i<=btnBg.length;i++) {
$(".tab-classify li a").eq(i).css('background-color', btnBg[i]);
$(".tab-classify li a").eq(i).css('border', border[i]);
$(".tab-classify li a").eq(i).css('color', fontColor[i]);

}

原文地址:https://www.cnblogs.com/james-L/p/8668807.html