我已经通过本网站上的许多线程,并没有我找到的代码正在为我工作。我有3个弹出窗口,我想关闭(请参阅下面的示例)。为什么我找到的jQuery代码没有工作,我已经没有想法了。jQuery关闭按钮不起作用
其实也在旁边注意为什么是一个脚本工作在HTML但不在我的.js文件(也见下面的例子)?
如果你能帮我解决这个问题,我将不胜感激,非常感谢你的时间。
$("#close").on('click', function() {
$("#id1").fadeOut();
});
.abt-right {
float: right;
display: inline-block;
}
#id1, #id2, #id3 {
display:none;
}
.abt-btn1, .abt-btn2, .abt-btn3 {
position: relative;
right: 10%;
top: 100px;
width: 500px;
height: 90px;
color: white;
margin-bottom: 30px;
}
.abt-btn1 {
background-color: black;
color: white;
}
.abt-btn2 {
background-color: grey;
color: white;
}
.abt-btn3 {
background-color: black;
color: white;
}
#abt-content1, #abt-content2, #abt-content3 {
position: absolute;
padding-right: 10px;
padding-top: 20px;
right: 100px;
bottom: 50px;
width:100%;
height: 100px;
z-index: 999;
}
#abt-content1 {
color: black;
background-color: red;
}
#abt-content2 {
color: black;
background-color: blue;
}
#abt-content3 {
color: black;
background-color: green;
}
#close {
position: absolute;
right:0;
top:0;
padding:2px 5px;
background:#ccc;
}
<div class="container-fluid wow fadeInLeft" id="about-sec">
<div class="back2">
<script type="text/javascript">
function show(elementId) {
document.getElementById("id1").style.display="none";
document.getElementById("id2").style.display="none";
document.getElementById("id3").style.display="none";
document.getElementById(elementId).style.display="block";
}
</script>
<div class="abt-right">
<div class="abt-btn1" onclick="show('id1');">Job Experience</div>
<div class="abt-btn2" onclick="show('id2');">Education</div>
<div class="abt-btn3" onclick="show('id3');">Timeline</div>
<div id="id1">
<div class="abt-content" id="abt-content1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
<span id="close">×</span>
</div>
</div>
<div id="id2">
<div class="abt-content" id="abt-content2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
<span id="close">×</span>
</div>
</div>
<div id="id3">
<div class="abt-content" id="abt-content3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
<span id="close">×</span>
</div>
</div>
非常感谢你的完美工作。我还是新来的JavaScript,你也教我如何解决任何未来的问题。再次感谢你。 – Jeoul
很高兴提供帮助。我很高兴,这不仅帮助你解决了原来的问题 – aemorales1