<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
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
|
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
头像好评
|
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 选择器。
|