js代码如下
var tablis = document.getElementById('J_tablist').getElementsByTagName('li');
var divlis = document.getElementById('J_tab').getElementsByTagName('div');
var tab = document.getElementById('J_tablist');
var t;
function getEvent(event) {
return event ? event : window.event;
}
function getTarget(event) {
return event.target || event.srcElement;
}
tab.onmouseover = function () {
var event = getEvent(event);
var target = getTarget(event);
for (var j = 0; j < tablis.length; j++) {
tablis[j].style.borderBottom = '0';
divlis[j].style.display = 'none';
}
clearTimeout(t);
t = setTimeout(function(){
switch(target.id) {
case "tab-a":
case "tab-b":
target.style.borderBottom = '3px solid #16afee';
document.getElementById(target.id+"-s").style.display = 'block';
break;
default :
}
}, 500);
};
html结构如下
<div id="J_tab" class="tab">
<ul class="tablist clearfix" id="J_tablist" style="width: 170px;">
<li id="tab-a" style="border-bottom: 3px solid rgb(22,175,238);">投资记录</li>
<li id="tab-b">回款计划</li>
</ul>
<div id="tab-a-s" style="display: block;"></div>
<div id="tab-b-s" style="display: none;">
</div>
点击ul中空白的时候下面的div就display:none了,怎样写switch中的default语句才能让他保持上一个状态?
既然你想要保持某个状态,那就用一个变量
来记录当前选中的状态吧。稍微修改一下你的JS
代码如下(修改的地方我会注释):
javascript
var tablis = document.getElementById('J_tablist').getElementsByTagName('li'); var divlis = document.getElementById('J_tab').getElementsByTagName('div'); var tab = document.getElementById('J_tablist'); var curTarget; //这里声明了一个变量来保存当前选中的状态,我这里要保存的当前选中的LI的ID var t; function getEvent(event) { return event ? event : window.event; } function getTarget(event) { return event.target || event.srcElement; } // 下面这个函数用了addEventListener方法,跟你的差不多 tab.addEventListener('mouseover',function (e) { var event = getEvent(event); var target = getTarget(event); // 下面这段是事件委托的核心代码,你要保证鼠标hover的是在LI上面 if ( target && target.nodeName.toUpperCase() == 'LI' ) { // 下面这段就是你要的保存状态的语句了,如果你hover的是当前选中态的,那就直接不执行后面的语句,达到保持原来的状态 if ( target.id === curTarget ) { return false; } for (var j = 0; j < tablis.length; j++) { tablis[j].style.borderBottom = '0'; divlis[j].style.display = 'none'; } clearTimeout(t); t = setTimeout(function(){ switch(target.id) { case "tab-a": case "tab-b": target.style.borderBottom = '3px solid #16afee'; document.getElementById(target.id+"-s").style.display = 'block'; curTarget = target.id; break; default : } }, 0); } });
如果你是初学JS的话,建议看《javascript高级程序设计-第三版》,很好的一本书~