为什么input放到绝对定位的元素之上，0001和0002上的按钮就没有了点击效果？

 <!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
    ul{list-style: none;width: 300px;margin:0 auto;height:30px;padding-left: 0px;}
    li:hover{background-color: #ccc;color:red;}
    .li-current {background-color: #ccc;color:red;}
    li{float:left;border:1px solid #000;width: 98px;text-align: center;height: 28px;}
    .tab-list{width: 298px;height:270px;border:1px solid #000;margin:0 auto;clear:both;position: relative;}
    .tab-list div{width: 298px;height:270px;position: absolute; opacity:0;filter:alpha(opacity=0);}
    .tab-list .current{opacity:1;filter:alpha(opacity=100);}
    .tab-list input{width: 80px;height: 50px;}
</style>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <ul id="control-menu">
      <li>001</li>
      <li>002</li>
      <li>003</li>
 </ul> 
  <div class="tab-list" id="tab-list">
    <div class="current">0001
        <input type="button" name="" value="0001">
    </div>
    <div >0002
        <input type="button" name="" value="0002">
    </div>
    <div >0003
        <input type="button" name="" value="0003">
    </div>
  </div>
  <script type="text/javascript">
    window.onload=function(){
        var oUl=document.getElementById('control-menu');
        var aLi=oUl.getElementsByTagName('li');
        var oDiv=document.getElementById('tab-list');
        var options=oDiv.getElementsByTagName('div');
        var i=0;
        for (i;i<aLi.length ; i++) {
        aLi[i].index=i;
         aLi[i].onmouseover=function(){ 
            show(this.index);
         }          
        }

        function show(a){
        for (var j = 0;j<aLi.length ; j++ ) {
            options[j].className="";//清除原有样式
            aLi[j].className="";
        }
        options[a].className="current";
        aLi[a].className="li-current";
        }
    }
  </script>
</body>
</html>

你一说我想起我之前用a标签好想也不行

你的0003挡在了0001和0002之上你一直点的都是0003这个按钮

你在js 添加属性时再填个z-index：999属性试试

最后一个button覆盖之前button了。比如把button数增加到5. 好用的只用5.

 <!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
    ul{list-style: none;width: 300px;margin:0 auto;height:30px;padding-left: 0px;}
    li:hover{background-color: #ccc;color:red;}
    .li-current {background-color: #ccc;color:red;}
    li{float:left;border:1px solid #000;width: 98px;text-align: center;height: 28px;}
    .tab-list{width: 298px;height:270px;border:1px solid #000;margin:0 auto;clear:both;position: relative;}
    .tab-list div{width: 298px;height:270px;position: absolute; opacity:0;filter:alpha(opacity=0);}
    .tab-list .current{opacity:1;filter:alpha(opacity=100);}
    .tab-list input{width: 80px;height: 50px;}
</style>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <ul id="control-menu">
      <li>001</li>
      <li>002</li>
      <li>003</li>
            <li>004</li>
            <li>005</li>
 </ul> 
  <div class="tab-list" id="tab-list">
    <div class="current">0001
        <input type="button" name="" value="0001">
    </div>
    <div >0002
        <input type="button" name="" value="0002">
    </div>
    <div >0003
        <input type="button" name="" value="0003">
    </div>
        <div >0004
        <input type="button" name="" value="0004">
    </div>
        <div >0005
        <input type="button" name="" value="0005">
    </div>
  </div>
  <script type="text/javascript">
    window.onload=function(){
        var oUl=document.getElementById('control-menu');
        var aLi=oUl.getElementsByTagName('li');
        var oDiv=document.getElementById('tab-list');
        var options=oDiv.getElementsByTagName('div');
        var i=0;
        for (i;i<aLi.length ; i++) {
        aLi[i].index=i;
         aLi[i].onmouseover=function(){ 
            show(this.index);
         }          
        }

        function show(a){
        for (var j = 0;j<aLi.length ; j++ ) {
            options[j].className="";//清除原有样式
            aLi[j].className="";
        }
        options[a].className="current";
        aLi[a].className="li-current";
        }
    }
  </script>
</body>
</html>

解决方法，可以通过设置div显示与不显示来控制。下面代码应该是你希望的效果。

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
    ul{list-style: none;width: 300px;margin:0 auto;height:30px;padding-left: 0px;}
    li:hover{background-color: #ccc;color:red;}
    .li-current {background-color: #ccc;color:red;}
    li{float:left;border:1px solid #000;width: 98px;text-align: center;height: 28px;}
    .tab-list{width: 298px;height:270px;border:1px solid #000;margin:0 auto;clear:both;position: relative;}
    .tab-list div{width: 298px;height:270px;position: absolute; opacity:0;filter:alpha(opacity=0);display: none;}
    .tab-list .current{opacity:1;filter:alpha(opacity=100);display: block;}
    .tab-list input{width: 80px;height: 50px;}
</style>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <ul id="control-menu">
      <li>001</li>
      <li>002</li>
      <li>003</li>
 </ul> 
  <div class="tab-list" id="tab-list">
    <div class="current">0001
        <input type="button" name="" value="0001">
    </div>
    <div >0002
        <input type="button" name="" value="0002">
    </div>
    <div >0003
        <input type="button" name="" value="0003">
    </div>
  </div>
  <script type="text/javascript">
    window.onload=function(){
        var oUl=document.getElementById('control-menu');
        var aLi=oUl.getElementsByTagName('li');
        var oDiv=document.getElementById('tab-list');
        var options=oDiv.getElementsByTagName('div');
        var i=0;
        for (i;i<aLi.length ; i++) {
        aLi[i].index=i;
         aLi[i].onmouseover=function(){ 
            show(this.index);
         }          
        }

        function show(a){
        for (var j = 0;j<aLi.length ; j++ ) {
            options[j].className="";//清除原有样式
            aLi[j].className="";
        }
        options[a].className="current";
        aLi[a].className="li-current";
        }
    }
  </script>
</body>
</html>

.tab-list div{width: 298px;height:270px;position: absolute; opacity:0;filter:alpha(opacity=0);display:none;}
.tab-list .current{opacity:1;filter:alpha(opacity=100);display:block;}
你只改了透明度，003一直覆盖在上面