0

我正在尝试创建三个重叠 div，它们的 z-Index 使用 Javascript 动态更改。选择时，我的 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，它应该是唯一的，而不是用于识别多个元素。您的代码将只针对 that 的第一个实例id。而是使用类名来定位不同的 div。其次，click接受一个参数，一个事件处理程序，或两个，其中第一个是事件数据，第二个是处理程序。因此，您的代码只执行那里的第二个函数，并且只针对第一个 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'});
    });
});

您还会看到我将事件侦听器更改为使用“on”而不是“click”。这仅仅是因为您仅以这种方式添加一个事件侦听器，而不是为每个目标元素附加不同的侦听器。在您的情况下，您只有三个目标。但是，如果你说 100，你只附加一个事件侦听器而不是 100。希望这会有所帮助。

于 2012-04-12T14:29:47.440 回答