重寫的z-index與按鈕單擊

-1

<html> 
    <head> 
     <style type="text/css"> 
      #div1 
      { 
       position:absolute; 
       left:0px; 
       top:0px; 
       z-index:-1; 
       width:100px; 
       height:100px; 
       background-color:#F00; 
      } 
      #div2 
      { 
       position:absolute; 
       left:0px; 
       top:0px; 
       z-index:-1; 
       width:100px; 
       height:100px; 
       background-color:#000; 
      } 
      #div3 
      { 
       position:absolute; 
       left:0px; 
       top:0px; 
       z-index:-1; 
       width:100px; 
       height:100px; 
       background-color:#ccc; 
      } 
      #div4 
      { 
       position:absolute; 
       left:0px; 
       top:0px; 
       z-index:-1; 
       width:100px; 
       height:100px; 
       background-color:#999; 
      } 
      #links 
      { 
       position:absolute; 
       left:0px; 
       top:200px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="div1">Div 1</div> 
     <div id="div2">Div 2</div> 
     <div id="div3">Div 3</div> 
     <div id="div4">Div 4</div> 

     <div id="links"> 
      <input type="button" value="Link1" onclick="resetAll(); up('div1');"> 
      <input type="button" value="Link2" onclick="resetAll(); up('div2');"> 
      <input type="button" value="Link3" onclick="resetAll(); up('div3');"> 
      <input type="button" value="Link4" onclick="resetAll(); up('div4');"> 

      <script> 
       function reset(id) 
       { 
        document.getElementById(id).style.zIndex = 1000; 
       } 

       function up(element) 
       { 
        element.style.zIndex = 1; 
       } 

       function resetAll() 
       { 
        for (var i = 1; i <= 4; i++) 
        { 
         reset('div' + i); 
        } 
       } 
      </script> 
     </div> 
    </body> 
</html>

這樣的作品，當你點擊Link 2按鈕顯示div2，它覆蓋就好div1的zindex，因爲我想。

但是，當您單擊Link 1（應顯示div1）時，它不會返回到div1。我希望無論點擊哪個按鈕來顯示它所鏈接的div。

來源

2014-11-25 AdamH

呼叫按鈕上點擊一個功能，而不是編寫內聯腳本。傳遞函數div ID。設置所有div的zIndex -1（使用類選擇器），然後將與該按鈕關聯的一個設置爲1. – 2014-11-25 09:44:16

你應該重置所有你的div到原來的狀態......然後標記你的選擇。 do..upgrade你的HTML到此版本：

<div id="div1">Div 1</div> 
<div id="div2">Div 2</div> 
<div id="div3">Div 3</div> 
<div id="div4">Div 4</div> 

<div id="links"> 
<input type="button" value="Link1" onclick="resetAll(); up('div1');"> 
<input type="button" value="Link2" onclick="resetAll(); up('div2');"> 
<input type="button" value="Link3" onclick="resetAll(); up('div3');"> 
<input type="button" value="Link4" onclick="resetAll(); up('div4');"> 
</div>

，並添加這個JS功能：

function reset(id) 
{ 
    document.getElementById(id).style.zIndex = 1000; 
} 

function up(element) 
{ 
    element.style.zIndex = 1; 
} 

function resetAll() 
{ 
    for (var i = 1; i <= 4; i++) 
    { 
     reset('div' + i); 
    } 
}

和來這裏的小提琴：http://jsfiddle.net/ymzrocks/5604wmtc/

來源

2014-11-25 09:53:21 ymz

我已經更改了我的原始帖子以符合您的建議......但我仍然無法做到工作。任何其他建議？ – AdamH 2014-11-25 10:05:37

複製和粘貼從小提琴..功能應該位於您的腳本標記 – ymz 2014-11-25 10:13:53

奇妙yackov，這個作品。感謝隊友，現在標記爲正確。感謝大家的建議。 – AdamH 2014-11-25 10:16:55

您需要設置的第一個回到0

<script> 

var shown; 
function show(){ 
    if(shown) shown.style.zIndex = 0; 
    shown = this; 
    shown.style.zIndex = 1; 
} 

</script>

然後

<input type="button" value="Link1" onclick="show()"> 
<input type="button" value="Link2" onclick="show()"> 
<input type="button" value="Link3" onclick="show()"> 
<input type="button" value="Link4" onclick="show()">

來源

2014-11-25 09:45:15

它是正確的行爲，因爲一步一步你給z-index=1到所有div。 Id div4與z-index=1可見並且您執行document.getElementById('div1').style.zIndex='1'正確的行爲是show div4。你應該給予更高的Z指數到div1或更低的Z指數到其他div

來源

2014-11-25 09:46:01 faby

重寫的z-index與按鈕單擊

回答

相關問題