我正在尝试在 JavaScript 中创建选项卡式内容，但它只工作一次

i am trying to create tabbed content in javascript but its working only once

本文关键字：工作 一次 JavaScript 创建 选项      更新时间：2023-09-26

这是我的 html，CSS 和 JavaScript 都在一个地方

.JS

  var links = document.getElementsByTagName("a"); //get the links 
    var len = links.length;
    for(var i = 0; i<len; i++) { 
       links[i].onclick = handleClick; // add onclick handler 
    }
    function handleClick(e){
       var target = e.target;
       var id = target.id + "content";
       document.getElementById(id).style.zIndex = 10;
    }

.HTML 

<div id="tabbed">
<a href="#" id="tabe1">Tabe1</a>
    <div class="section" id="tabe1content">
            <div>
        <p> content1 </p>   
        </div>
    </div>
    <a href="#" id="tabe2">Tabe2</a>
    <div class="section" id="tabe2content">
            <div>
        <p> content2 </p>   
        </div>
    </div>
    <a href="#" id="tabe3">Tabe3</a>
    <div class="section" id="tabe3content">
            <div>
        <p> content3 </p>   
        </div>
    </div>
 </div>

.CSS 

.section{
    position:absolute;
    float:left;
    width:500px;
    background-color:gray;
    left:0;
    top:0;
    height:300px;
    margin-top:30px;
}
#tabbed{
    position:relative;
}
a {
    margin-right:10px;
    float:left;
    display:block;
}

当我测试它时，它只工作一次。第二次单击表 1 时，它仍然显示表 3。请看看出了什么问题，还有没有其他方法比我的更好？

  • 委托给父级
  • 跟踪最大的 z 指数值

http://jsfiddle.net/3LuC4/6/

.section{
    position:absolute;
    float:left;
    width:500px;
    background-color:gray;
    left:0;
    top:0;
    height:300px;
    margin-top:30px;
    z-index: 1;
}
#tabbed{
    position:relative;
}
a {
    margin-right:10px;
    float:left;
    display:block;
}
<div id="tabbed">
<a href="#" id="tabe1">Tabe1</a>
    <div class="section" id="tabe1content">
        <div>
            <p> content1 </p>   
        </div>
    </div>
    <a href="#" id="tabe2">Tabe2</a>
    <div class="section" id="tabe2content">
        <div>
            <p> content2 </p>   
        </div>
    </div>
    <a href="#" id="tabe3">Tabe3</a>
    <div class="section" id="tabe3content">
        <div>
            <p> content3 </p>   
        </div>
    </div>
 </div>
var root = document.getElementById("tabbed");
var veryTop = 2;
root.onclick = handleClick;
function handleClick(e){
    var target = e.target;
    if ( target.tagName !== 'A' ) { e.preventDefault(); return; }
    var tab = document.getElementById( target.id + 'content' );
    tab.style.zIndex = ( veryTop++ ).toString();
    e.preventDefault();
}

应该解决你的"工作一次"问题。

当您单击接近 JS 末尾的选项卡时，您将每个选项卡的z-index设置为 10。完成此操作后，它们不会更改回来。

在onclick handler中，您需要构建一个字符串，将所有其他 z 索引设置为较小的数字;我不确定执行此操作的确切方法，但您似乎有足够的知识来完成该部分。

您可以遍历section类，重置所有类的z-index，然后设置新类：

var elems = document.getElementsByClassName("section");
for (var i = 0; i < elems.length; i++) {
    elem[i].style.zIndex = 0; //or whatever your default is
}
var target = e.target;
var id = target.id + "content";
document.getElementById(id).style.zIndex = 10;

您的 z 索引最终都相同。添加一个小函数来对它们进行排序：

function sortZindex(){
   for(var i = 0; i<len; i++) { 
       var id = links[i].id + "content";
       document.getElementById(id).style.zIndex = 9;
    }
}

http://jsfiddle.net/U2qfj/

相关文章：