Question

我创建了一个id =＆＃34; modal＆＃34;的div。在这个div中有一个锚标记。在这个标记中我从数据库中获取数据。

 <div id = "modal">
 <a href = "javascript:void(0)" onclick = "document.getElementById('light_<?php echo $mode_id; ?>').style.display='block';document.getElementById('fade_<?php echo $mode_id; ?>').style.display='none'"><button style="border: none;color: inherit;background-color: white; font-size: 13px;"><?php echo $mode_name; ?> : <?php echo $mode_start_time; ?> - <?php echo $mode_end_time; ?>, <?php echo $mode_day_week; ?> </button></a>
 </div>

现在，当我点击数据来自数据库的锚标签时，我希望这样。它显示id light_1的另一个div（id =＆＃34; light _＆＃34;）和第一个div（模态）hide。

<div id="light_<?php echo $mode_id; ?>" class="white_content" style = "width: 300px; height: auto;" >
<div id="fade_<?php echo $mode_id; ?>" class="black_overlay"></div>
</div>

Answer 1

这个答案需要JQuery。

要隐藏#fade_* div：您可以使用$(#fade_*).delay(delay).fadeOut();，其中延迟是隐藏（动画）所需的时间。

首先将<{1}}应用于您想要隐藏的div。

要显示style: display: none div：您可以使用：

#light_*

其中message是将显示的文本。

Answer 2

您可以创建一个函数来调用以使代码可读，如下例所示：

<div id="modal">
     <a href="javascript:void(0)" onclick="show_func()"> <!--Your Codes--> </a>
</div>

<script>
     function show_func(){
          $("#modal").hide(); //hide the <div id="modal">

          $("#light_1").show(); //show1
          //or try this one
          document.getElementById("light_1").innerHTML = "Your Codes"; //show2
     }
</script>

显示一个div并使用javascript隐藏另一个div

2 个答案: