jQuery 关闭按钮不起作用
jQuery close button not working
我浏览了该网站上的许多主题,none 我找到的代码对我有用。我有 3 个要关闭的弹出窗口(请参见下面的示例)。我 运行 不知道为什么我发现的 jQuery 代码中的 none 有效。
实际上还有一个旁注,为什么脚本在 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>
如果你想使用它,你需要包含jQuery。
您可以在这里下载:
https://jquery.com/
或者只添加一个脚本标签并从 google 个服务器加载
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
希望对您有所帮助
这是一个 plunker,请务必将您的事件处理程序包含在 $(doument).ready(function){});
中,还要确保 ID 应该是唯一的,这样才能正常工作
http://plnkr.co/edit/He0ZmnJ4c72aQA9ggsl6?p=preview
javascript
$(document).ready(function() {
$("#close1").on('click', function() {
$("#id1").fadeOut();
});
$("#close2").on('click', function() {
$("#id2").fadeOut();
});
$("#close3").on('click', function() {
$("#id3").fadeOut();
});
});
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";
}
Html
<body>
<h1>Hello Plunker!</h1>
<div class="container-fluid wow fadeInLeft" id="about-sec">
<div class="back2">
<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="close1">×</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="close2">×</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="close3">×</span>
</div>
</div>
</div>
</div>
</div>
</body>
我浏览了该网站上的许多主题,none 我找到的代码对我有用。我有 3 个要关闭的弹出窗口(请参见下面的示例)。我 运行 不知道为什么我发现的 jQuery 代码中的 none 有效。
实际上还有一个旁注,为什么脚本在 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>
如果你想使用它,你需要包含jQuery。
您可以在这里下载: https://jquery.com/
或者只添加一个脚本标签并从 google 个服务器加载
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
希望对您有所帮助
这是一个 plunker,请务必将您的事件处理程序包含在 $(doument).ready(function){});
中,还要确保 ID 应该是唯一的,这样才能正常工作
http://plnkr.co/edit/He0ZmnJ4c72aQA9ggsl6?p=preview
javascript
$(document).ready(function() {
$("#close1").on('click', function() {
$("#id1").fadeOut();
});
$("#close2").on('click', function() {
$("#id2").fadeOut();
});
$("#close3").on('click', function() {
$("#id3").fadeOut();
});
});
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";
}
Html
<body>
<h1>Hello Plunker!</h1>
<div class="container-fluid wow fadeInLeft" id="about-sec">
<div class="back2">
<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="close1">×</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="close2">×</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="close3">×</span>
</div>
</div>
</div>
</div>
</div>
</body>