javascript - js事件委托，实现tab切换，初学者轻喷0.0

Question

js代码如下

var tablis = document.getElementById('J_tablist').getElementsByTagName('li');
var plis = document.getElementById('J_tab').getElementsByTagName('p');
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';
        plis[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结构如下

   <p 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>
        <p id="tab-a-s" style="display: block;"></p>
        <p id="tab-b-s" style="display: none;">
    </p>

点击ul中空白的时候下面的p就display：none了，怎样写switch中的default语句才能让他保持上一个状态？

Answer 1

既然你想要保持某个状态，那就用一个变量来记录当前选中的状态吧。稍微修改一下你的JS代码如下（修改的地方我会注释）：

javascriptvar tablis = document.getElementById('J_tablist').getElementsByTagName('li');
var plis = document.getElementById('J_tab').getElementsByTagName('p');
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';
      plis[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高级程序设计-第三版》，很好的一本书~

Answer 2