[英]display one div and hide another div using javascript
I have created one div of id="modal".我创建了一个 id="modal" 的 div。 In this div there is a anchor tag .Inside this tag i am getting data from database .
在这个 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>
Now, I want that when i clicked on anchor tag in which data is coming from database.现在,我希望当我点击数据来自数据库的锚标记时。 it display the another div(id= "light_") of id light_1.and first div (modal) hide.
它显示另一个 div(id="light_") id light_1.and 第一个 div (modal) 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>
This answer requires JQuery.这个答案需要 JQuery。
To hide the #fade_*
div: you can use $(#fade_*).delay(delay).fadeOut();
要隐藏
#fade_*
div:您可以使用$(#fade_*).delay(delay).fadeOut();
, where delay is the time it takes to hide (animation). ,其中延迟是隐藏(动画)所需的时间。
Apply style: display: none
to the div you want to have hidden at first.将
style: display: none
到您想要隐藏的 div。
To show the #light_*
div: you can use :要显示
#light_*
div:您可以使用:
$(#light_*).text('');
$(#light_*).fadeIn("slow").append(message);
where message is the text that will be displayed.其中 message 是将显示的文本。
You can create a function to call to make your code readable, like this sample:您可以创建一个函数来调用以使您的代码可读,如下例所示:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.