如何通过js在li的奇偶或单双标签中增加class?

如何通过js在li的奇偶或单双标签中增加class?,第1张

如果只是个视觉修饰而不是逻辑功能的话,能用css实现的效果就不要用js去做,css3的选择器:

nth-of-type()可以判断奇偶,虽然有可能低版本IE不支持,但是视觉效果的话低版本放弃就完了。

<style>

ul li:nth-of-type(odd){奇数行样式}   

ul li:nth-of-type(even){偶数行样式}

<style>  

如果我说服不了你,一定要js的话,那么继续:

 

<script id="jquery_182" type="text/javascript" class="library"

 src="/js/sandbox/jquery/jquery-1.8.2.min.js"></script>

<meta charset="utf-8" />

<ul id="list">

    <li><a href="#">1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

</ul>

<script>

function CheckLI() {

    var obj = document.getElementById("list").getElementsByTagName("li")//取得#list下所有li

    for(var i=0i<obj.lengthi++){//循环出每个li

        //下面两句中添加class用的jquery的addClass()方法,需要载入JQ才支持,js原生的方法需要IE10才支持,兼容的方法要另外写函数,手打的,直接最简单的JQ实现

    if(i % 2 == 0) {$(obj[i]).addClass("ou")}//如果被2整除是偶数

        else {$(obj[i]).addClass("ji")}//否则是奇数

    }

}

window.onload = CheckLI//网页载入后执行以上函数

</script>

<style>

    .ji{color: red}

    .ou{color: yellow}

</style>

你是要进行单选?

else{

//改这个就行了吧,直接覆盖就可以了

addedLI=id

//更新cookie

$.cookie('addedLI',addedLI)

}

用上面那代码让它自动变换,按钮的效果就是先clearInterval()让它停下来,然后获取当前停留li的index,然后上下按钮就是通过index控制添加css了,下面的a标签就是利用$("ul li:eq(i)")还有来选择要添加css的li。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11828914.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-19
下一篇2023-05-19

发表评论

登录后才能评论

评论列表(0条)

    保存