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 があります。イベント ハンドラーを で囲むようにしてください$(doument).ready(function){});。

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/

または、スクリプトタグを追加して、Googleサーバーからの場合にロードします

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

お役に立てれば

于 2016-05-12T15:11:51.387 に答える