点击某一事件让其改变 style，但让其他区域恢复原本 style，求思路

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 3744 天前的主题，其中的信息可能已经有所发展或是发生改变。

<div class="exp-about exp-left-block"> <p class="exp-left-pagh">声明与条款</p> <div class="exp-over-upright"></div> </div> <div class="exp-change-log exp-left-block"> <p class="exp-left-pagh">更改日志</p> <div class="exp-over-upright"></div> </div> <div class="exp-other exp-left-block"> <p class="exp-left-pagh">赞助商</p> <div class="exp-over-upright"></div> </div>

JS 和 HTML 无关

function add3Events(){ for (var i=0; i < bar_list.length; i++) { bar_list[i].onclick = function(num) { return function() { // 点击改变 css this.getElementsByTagName('div')[0].style.display = 'block'; this.style.backgroundColor = '#00A2CA'; this.style.color = '#ffffff'; // 其他 div 恢复默认 css [].forEach.call(bar_list, function(ele, index, arr) { if (index == num) return; ele.getElementsByTagName('div')[0].style.display = 'none'; ele.style.backgroundColor = '#F4F4F4'; ele.style.color = '#333333'; }); }; }(i); } }

像这样的选中某个 div ，此 div 的样式改变。但是其他区域只有用循环这种死方法，然后判断不是当前 div 的其他 div 的样式恢复正常。这样感觉太烦了，有没有好一点的方法呢，求思路。

第 1 条附言 2015-09-26 15:08:09 +08:00

确实应该反过来，一时间脑子转不过弯

12 条回复 /strong> 2015-09-27 08:40:34 +08:00

1

jugelizi
2015-09-26 14:15:27 +08:00

addclass removeclass

2

viko16
2015-09-26 14:24:13 +08:00 via Android

为什么不能反过来呢，先全部都恢复，再对那只特殊的进行处理

3

Septembers
2015-09-26 14:28:40 +08:00 via Android

http://jqapi.com/#p=toggleClass

4

likai
2015-09-26 14:31:23 +08:00

将 style 写成 class.然后参考 @jugelizi @viko16

5

learnshare
2015-09-26 14:58:03 +08:00

参考 #2 ，先抹平，然后再处理特定项

6

breeswish
2015-09-26 15:10:08 +08:00

先用 jQuery 的批量处理特性
再用 #2 说的先全部取消再特殊处理

只需 2 行:
$(.....).removeClass('....');
$(this).addClass('....');

7

breeswish
2015-09-26 15:13:00 +08:00

或者，对于一定只有一个处于激活状态的，也可以用 lastXXX

比如

var lastActivatedTab = null;
....
....
tab.Onclick= function () {

if (lastActivatedTab !== null) {
// do somthing to `lastActivatedTab`
}

// do something to `this`
lastActivatedTab = this;

}

8

jiongxiaobu
2015-09-26 15:36:31 +08:00 via Android

@breeswish bw!

9

GeekTest
2015-09-26 19:06:19 +08:00 via Android

头像好评

10

alexsunxl
2015-09-26 19:43:10 +08:00

@breeswish

11

alexsunxl
2015-09-26 19:44:49 +08:00 1

@breeswish 我能用一行 $(this).addClass(cls).siblings().removeClass(cls);
如果需要返回$(this),就这样 $(this).addClass(cls).siblings().removeClass(cls).end()

12

vitovan
2015-09-27 08:40:34 +08:00 via Android

Not 选择器。