Question

我在这个网站上经历了很多线程，我找到的代码都没有为我工作。我有3个弹出窗口要关闭（参见下面的示例）。我已经没有想法为什么我找到的jQuery代码都没有工作。

实际上也在旁边注意为什么脚本在html中工作但不在我的.js文件中（在下面的例子中也可以看到）？

如果你能帮我解决这个问题，我将非常感激，非常感谢你的时间。

＆＃13;

$("#close").on('click', function() {
   $("#id1").fadeOut();
 });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这是一个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>

Answer 2

如果你想使用它，你需要包含jQuery。

你可以在这里下载： https://jquery.com/

或者只是添加一个脚本代码并从google服务器加载

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

希望这有帮助

jQuery关闭按钮不起作用

2 个答案: