0

これは、CSS と JavaScript をすべて 1 か所にまとめた私の html です

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回しか機能しません。テーブル 1 を 2 回目にクリックすると、まだテーブル 3 が表示されます。

4

4 に答える 4

1
  • 親のデリゲート
  • 最大の z-index 値を追跡する

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();
}

PS。「一度だけ機能する」問題を解決する必要があります。

于 2013-09-25T18:47:20.207 に答える
0

z-index はすべて同じになります。それらをソートするための小さな関数を追加します。

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/

于 2013-09-25T18:17:35.997 に答える
0

タブをクリックすると、JS の最後の近くで、z-index各タブの が 10 に設定されます。これを行った後、それらは元に戻りません。

内部では、他のonclick handlerすべての z-index をより低い数値に設定する文字列を作成する必要があります。これを行う正確な方法はわかりませんが、その部分を完了するのに十分な知識があるようです。

于 2013-09-25T17:59:20.660 に答える