tab选项卡中div覆盖导致不能操作问题

时间:2021-07-01 06:27:57

实现了tab选项卡,里面使用div时候位置是顺序排列的,当点击第二个选项卡时候div的位置会向下

怎么修改呢,首先想到的是固定位置,果然div有position选项,设定为固定,就能实现

<DIV STYLE="position:absolute;left=10;top=20"> 你的内容</DIV>

<DIV STYLE="position:absolute;left=15;top=25"> 你的内容</DIV>

然而又引起的问题是div覆盖后导致底层的div的按钮之类的不能点击,形成了遮罩效应

又搜了一下,改变div的上下顺序,在css中有个z-index选项,可以设置元素的上下顺序,其中数字越大元素越在上层:

JavaScript 语法: object.style.zIndex="1"

所以在选项卡中的js代码中加入点击时候把当前元素置为最大,

<span style="font-size:18px;"><script>
window.onload = function() {
    var oDiv = document.getElementById("tab");
    var oLi = oDiv.getElementsByTagName("div")[0].getElementsByTagName("li");
    var aCon = oDiv.getElementsByTagName("div")[1].getElementsByTagName("div");
    aCon[0].style.zIndex="20";
    var timer = null;
    for (var i = 0; i < oLi.length; i++) {    //循环遍历onclick事件
        oLi[i].index = i;
        //oLi[i].onmouseover = function() {
       	oLi[i].onclick = function() {
            show(this.index);
        }
    }
    function show(a) {               //点击按钮执行的动作
        index = a;
        var alpha = 0;
        for (var j = 0; j < oLi.length; j++) {  //循环历遍去掉button样式和把div隐藏
            oLi[j].className = "";
            aCon[j].className = "";
            aCon[j].style.opacity = 0;
           <span style="color:#ff0000;"> aCon[j].style.zIndex="10";</span>
            aCon[j].style.filter = "alpha(opacity=0)";
        }
        oLi[index].className = "cur";    //当前按钮添加样式
        <span style="color:#cc0000;">aCon[index].style.zIndex="30";</span>
        clearInterval(timer);
        timer = setInterval(function() {
            alpha += 2;
            alpha > 100 && (alpha = 100);
            aCon[index].style.opacity = alpha / 100;
            aCon[index].style.filter = "alpha(opacity=" + alpha + ")";
            alpha == 100 && clearInterval(timer);
        },
        5)
    }
}
</script></span>
然后点击发现基本可以了,但是最开始的默认选项卡还是不能点击,而从其他页面切过来就可以。需要再设置一个z-index值,然后就可以了
aCon[0].style.zIndex="20";