js给循环中的li添加class="active"

1、首先在html中布局好两个按钮和一个div，如下图所示。

2、接着编写添加class的方法，如下图所示，通过classList中的add。

3、运行页面以后看到如下图所示的界面。

4、点击添加class按钮就可以看到div中多了样式。

5、接下来在编写移除class样式即可。

如果只是个视觉修饰而不是逻辑功能的话，能用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>

一组li，这个li不是v-for出来的。是直接写死的。为什么不用v-for，li里面的结构不一样，

给所有的li添加点击事件 tanchu（），给点击的当前li添加一个class；

现在点击之后所有的都会添加这个class；

Vue.js（读音 /vjuː/, 类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

---