0

z-Index が Javascript で動的に変更される 3 つのオーバーラップ div を作成しようとしています。選択するとスタックの一番上に来る div がありますが、一番上の div の下にある他の div をクリックすることはできません。誰かが私を助けることができますか？以下は私が使用しているJavascriptです：

<script>
$(document).ready(function() {
$("div#box").click(function() {
    $(this).css({'z-index' : '9999'});
} , function() {
    $(this).css({'z-index' : '1'});
});
});
</script>

CSS:

 #container{
display: block;
position:relative;
margin: 0px;
padding: 0px;
width: 465px;
height: 350px;
 }

 .redBox {
display: block;
margin: 0px;
padding: 0px;
width: 450px;
border: 1px solid #ED1F24;
z-index: 100;
position: absolute;
top: 120px;
right:0px;
background-color: #FFF;
cursor:pointer;
  }

  .redBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFF;
background-color: #ED1F24;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
 }

 .redBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #ED1F24;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
 }

 .redBox ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000;
margin: 0px;
height: 150px;
padding: 10px 10px 0px 20px;
 }

 .redBox p{
margin:0px;
padding:0px;    
 }

 .redBox .boxFooter {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 1.1em;
color: #000;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 0px;
margin-top: 0px;
list-style-type: none;
margin-left: 5px;
}

.blueBox .footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
line-height: 1.1em;
color: #000;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 0px;
margin-top: 0px;
list-style-type: none;
margin-left: 20px;
 }

 .blueBox {
display: block;
margin: 0px;
padding: 0px;
width: 430px;
border: 1px solid #2B3087;
z-index: 50;
position: absolute;
top: 90px;
right:0px;
background-color: #FFF;
cursor:pointer;
 }

 .blueBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #FFF;
background-color: #2B3087;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
 }

 .blueBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #2B3087;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
 }

 .blueBox p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.1em;
color: #000;
padding: 0px 0px 0px 20px;
margin: 5px 0px;
 }

 .blueBox p strong {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold;
line-height: 1.1em;
color: #000;
 }

 .greenBox {
display: block;
margin: 0px;
padding: 0px;
width: 410px;
border: 1px solid #99CA3C;
z-index: 2;
position: absolute;
top: 60px;
right:0px;
background-color: #FFF;
cursor:pointer;
 }

 .greenBox h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #FFF;
background-color: #99CA3C;
display: block;
height: 10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
  }

  .greenBox h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFF;
background-color: #99CA3C;
display: block;
height:10px;
margin: 0px;
text-align: left;
padding: 10px 10px 10px 20px;
line-height: 10px;
  }

  #hero {
display: block;
margin: 0px;
padding: 0px;
height: 315px;
width: 465px;
text-align: center;
  }

HTML:

 <td width="50%" rowspan="2" valign="top" style="position:relative;">
 <div id="hero"><img src="images/image.jpg" alt="" width="300" height="315" border="0" />
 </div>
 <div id="container">
 <div class="redBox" id="box">
        <h1>Rewards</h1>
        <ul>
          <li>Text</li>
                      <li>Text</li>
                      <li>Text</li>>
                  <li>Text</li>
                   </ul>
       <h2>Rewards</h2> 
</div>

<div class="blueBox" id="box">
           <h1>Service and Security</h1>
       <p>text</p>
           <p>text</p>
           <p>text</p>
           <<p>text</p>
           <p class="footer">Text</p>
           <h2>Service and Security</h2>    
</div>
<div class="greenBox" id="box">
           <h1>Redeem Rewards</h1>
        <ul>
                <li>text Here</li>
                    <li>text Here</li>
                    <li>text Here</li>
                </ul>
        <h2>Rewards</h2>    
</div>
</div>
</td>
4

2 に答える 2

1

コードにはいくつかの問題があります。まず第一に、id一意である必要があり、複数の要素を識別するために使用されない をターゲットにしています。あなたのコードは、その最初のインスタンスのみをターゲットにしますid。代わりにクラス名を使用して、さまざまな div をターゲットにします。2つ目clickは、1 つの引数、イベント ハンドラー、または 2 つの引数を取ります。最初の引数はイベント データで、2 番目の引数はハンドラーです。したがって、コードはそこにある 2 番目の関数のみを実行し、最初の div に対してのみ実行します。

代わりにこれを試してください：

$(document).ready(function() {
    var zIndex = 9999;
    $(".box").click(function() {
        $(this).css({'z-index': zIndex++ });
    });
});​

HTML。

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
于 2012-04-12T13:45:50.217 に答える
0

実用的なソリューションでフィドルを作成しました。要素の z-index を変更する必要がある場合は、その位置属性を「静的」以外に設定する必要があります。静的がデフォルトなので、「絶対」または「相対」に変更できます。これを行わないと、ブラウザーは z-index を無視します。また、JavaScript を使用して CSS プロパティを変更しようとしている場合、「z-index」は使用できません。JavaScript は名前にキャメルケースを使用します。

フィドルへのリンクは次のとおりです。 http://jsfiddle.net/vKeqD/

そして、ここに後世のコードがあります：

$(document).ready(function() {
    var zIndex = 9999;
    $(".box").on('click', function() {
        $(this).css({'zIndex' : zIndex++ , 'position': 'absolute'});
    });
});

イベント リスナーを変更して、'click' の代わりに 'on' を使用したこともわかるでしょう。これは、すべてのターゲット要素に異なるリスナーをアタッチするのではなく、この方法でイベント リスナーを 1 つだけ追加するためです。あなたの場合、ターゲットは 3 つしかありません。ただし、100 と言うと、100 ではなく 1 つのイベント リスナーのみをアタッチします。これが役に立てば幸いです。

于 2012-04-12T14:29:47.440 に答える