我已經通過本網站上的許多線程,並沒有我找到的代碼正在爲我工作。我有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