2016-05-12 117 views
0

我已经通过本网站上的许多线程,并没有我找到的代码正在为我工​​作。我有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>

回答

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

非常感谢你的完美工作。我还是新来的JavaScript,你也教我如何解决任何未来的问题。再次感谢你。 – Jeoul

+0

很高兴提供帮助。我很高兴,这不仅帮助你解决了原来的问题 – aemorales1

0

你需要包括jQuery的,如果你想使用它。

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

或者只是添加脚本标签,如果从谷歌的服务器加载

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

希望这有助于

+0

这是在HTML中的脚本? (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”; (“#close”)。on('click',function(){ } – Jeoul

+0

不,这个片段: $(“#close”)。 $代表jQuery库的使用 –

+1

当我添加链接到jquery时,你的代码工作 –