2016-05-12 160 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時,你的代碼工作 –