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

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

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

<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 条回复 • 2015-09-27 08:40:34 +08:00

jugelizi

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

addclass removeclass

viko16

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

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

Septembers

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

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

likai

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

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

learnshare

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

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

breeswish

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

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

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

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;

}