点击图片打开div
[英]open div on click of image
问题描述
I have a very simple module to develop. 
我有一个非常简单的模块要开发。 On click of an image I need to open up a div element that I have created.I have attached my HTML and javascript file.When I am loading the page the div wont be coming because I have given style="display:none 点击图片时，我需要打开一个我创建的div元素。我已经附加了HTML和javascript文件。当我加载页面时，div不会出现，因为我给了style="display:none
myfunction() { document.getElementById('Chatbot').style.visibility = "visible"; }
<body> <a href="#Chatbot" id="chat" onclick="myfunction()"> <img src="sticky.png" style="width:50px;height:50px"> </a> <div id="Chatbot" style="display:none"> <div id="header"> Legal Genie <div class="icons"> <i class="fa fa-question-circle" aria-hidden="true"></i> <i class="fa fa-refresh" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i> </div> </div> <div><textarea rows="3" cols="20">Press enter to send your message</textarea> </div> </div> </body>
3 个解决方案
解决方案1
0 2019-01-02 21:02:10
document.getElementById('Chatbot').style.display = "block";
function myfunction() { document.getElementById('Chatbot').style.display = "block"; }
<body> <a href="#Chatbot" id="chat" onclick="myfunction()"> Some Image </a> <div id="Chatbot" style="display:none"> <div id="header"> Legal Genie <div class="icons"> <i class="fa fa-question-circle" aria-hidden="true"></i> <i class="fa fa-refresh" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i> </div> </div> <div><textarea rows="3" cols="20">Press enter to send your message</textarea> </div> </div> </body>
解决方案2
0 2019-01-02 21:07:33
Avoid using inline scripts and also avoid capitalising the first letter of your ID or class name. 避免使用内联脚本 ，也避免大写ID或类名的首字母。
Just add an event listener to your #chat anchor link that loads a function which sets the css display property of your div to block on click like this: 只需将事件监听器添加到您的#chat锚链接即可，该链接会加载一个函数，该函数会将div的css display属性设置为在点击时block ，如下所示：
/* JavaScript */ var chat = document.getElementById("chat"); var div = document.getElementById('chatbot'); function showDiv(){ div.style.display = "block"; } chat.addEventListener("click", showDiv);
/* CSS */ a {text-decoration: none; padding: 5px; background-color: green; color: white;} #chatbot {display: none;}
<!-- HTML --> <a type="button" href="#Chatbot" id="chat">Open Div</a> <hr> <div id="chatbot"> <div id="header"> Legal Genie <div class="icons"> <i class="fa fa-question-circle" aria-hidden="true"></i> <i class="fa fa-refresh" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i> </div> </div> <div><textarea rows="3" cols="20">Press enter to send your message</textarea> </div>
解决方案3
-1 2019-01-02 22:19:26
It can be a simple way 这可能是一种简单的方法
<script>
$( document ).ready(function() {
$('#chat').click( function(){
if ( $('#Chatbot').hasClass('active') ) {
$('#Chatbot').removeClass('active');
} else {
$('#Chatbot').addClass('active');
}
});
});
</script>
Add lil css 添加lil CSS
<style>
.active {
display:block!important;
}
</style>
Your HTML 您的HTML
<body>
<div id="chat">
Some Image
</div>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.