0

我在这个网站上浏览了许多线程，我发现的代码都没有为我工作。我有 3 个要关闭的弹出窗口（请参阅下面的示例）。我已经想不出为什么我发现的 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>

4

2 回答 2

1

这是一个 plunker，请务必将您的事件处理程序包含在 a 中$(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>
于 2016-05-12T15:32:09.443 回答
0

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

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

或者只是添加一个脚本标签并从谷歌服务器加载

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

希望这可以帮助

于 2016-05-12T15:11:51.387 回答