点击 选中该元素 改变当前点击元素的样式 其他元素样式不变

js方法

1.给元素添加点击事件 并传参。

onclick = "clickItem( this )"

2.在事件中获取到该item，给item添加css类 ，

item.classList = "topactive"

此时会发现点击即会给该item添加css.

3.我们想要的是只给当前点击的item 添加css(即只有一个选中的)，那么我们就要循环所有item 把样式去掉 给当前点击的添加css.

代码如下：

function clickItem(item) {var topList = document.querySelectorAll(".main ul>li")for (var i = 0; i < topList.length; i++) {topList[i].classList = ''}item.classList = "topactive"}

效果如下：

具体代码如下：

jq方法

1.循环所有item，并给每个item添加点击事件

2.当item点击的时候，给item添加css,并把所有兄弟元素的css移除 （效果是一样的）

$(this).addClass('topactive').siblings().removeClass('topactive')

具体代码如下：