2017-05-28 3 views
0

1回の使用後に動作を停止します。ブロック:なし、そしてもう一つは、表示するようになっていない:私は1つのdivが表示になっているボタンを押すと:私は起こることを望むもの。これは初めてボタンを押したときに機能しますが、その後は何も起こりません。ここで.click jqueryの機能は、私は私の.clickのjqueryの機能に問題にぶつかった

は、いくつかのコードは次のとおりです。事前に

$(document).ready(function(){ 
 
    $("#0").click(function(){ 
 
     $("#product_container2").css("display", "none"); 
 
     $("#product_container3").css("display", "none"); 
 
     $("#product_container1").css("display", "block"); 
 
    }); 
 
    $("#1").click(function() { 
 
     $("#product_container1").css("display", "none"); 
 
     $("#product_container3").css("display", "none"); 
 
     $("#product_container2").css("display", "block"); 
 
    }); 
 
    $("#2").click(function(){ 
 
     $("#product_container1").css("display", "none"); 
 
     $("#product_container2").css("display", "none"); 
 
     $("#product_container3").css("display", "block"); 
 
    }); 
 
});
<section id="product_container1" class="col-12 product_container"> 
 
\t <h1 id="product-h1"> Produkter </h1> 
 
\t <hr style="width:90%; margin-left:5%"> 
 
\t <div class="product_info_container productx"> 
 
\t \t <img src="bilder/dumleOriginal220.png" alt="Dumle" id="product1" class="product"></img> 
 
\t \t <h2> Dumle Original 220 g</h2> 
 
\t \t \t <p> Dumle brings out the twinkle in your eyes. The goofy sweet is a combination of soft chewy toffee and smooth Fazer Chocolate. The... </p> 
 
\t \t \t 
 
\t \t <div id="button"> <b> Visa produkt information </b> </div> 
 

 
\t <hr style="width:80%; margin-left:5%; margin-top:10px;"> 
 
\t </div> 
 
    <div id="buttons"> 
 
    <a href="#product_container1" id="0" class="mybutton myred">1</a> 
 
    <a href="#product_container2" id="1" class="mybutton myblue">2</a> 
 
    <a href="#" id="2" class="mybutton myblue">3</a> 
 
</div> 
 
</section> 
 

 
<section id="product_container2" class="col-12 product_container"> 
 
\t <h1 id="product-h1"> Produkter </h1> 
 
\t <hr style="width:90%; margin-left:5%"> 
 
\t <div class="product_info_container productx"> 
 
\t \t <img src="bilder/dumleOriginal220.png" alt="Dumle" id="product1" class="product"></img> 
 
\t \t <h2> Dumle Original 220 g</h2> 
 
\t \t \t <p> Dumle brings out the twinkle in your eyes. The goofy sweet is a combination of soft chewy toffee and smooth Fazer Chocolate. The... </p> 
 
\t \t \t 
 
\t \t <div id="button"> <b> Visa produkt information </b> </div> 
 

 
\t <hr style="width:80%; margin-left:5%; margin-top:10px;"> 
 
\t </div> 
 
    <div id="buttons"> 
 
    <a href="#product_container1" id="0" class="mybutton myred">1</a> 
 
    <a href="#product_container2" id="1" class="mybutton myblue">2</a> 
 
    <a href="#" id="2" class="mybutton myblue">3</a> 
 
</div> 
 
</section> 
 

 
<section id="product_container3" class="col-12 product_container"> 
 
\t <h1 id="product-h1"> Produkter </h1> 
 
\t <hr style="width:90%; margin-left:5%"> 
 
\t <div class="product_info_container productx"> 
 
\t \t <img src="bilder/dumleOriginal220.png" alt="Dumle" id="product1" class="product"></img> 
 
\t \t <h2> Dumle Original 220 g</h2> 
 
\t \t \t <p> Dumle brings out the twinkle in your eyes. The goofy sweet is a combination of soft chewy toffee and smooth Fazer Chocolate. The... </p> 
 
\t \t \t 
 
\t \t <div id="button"> <b> Visa produkt information </b> </div> 
 

 
\t <hr style="width:80%; margin-left:5%; margin-top:10px;"> 
 
\t </div> 
 
    <div id="buttons"> 
 
    <a href="#product_container1" id="0" class="mybutton myred">1</a> 
 
    <a href="#product_container2" id="1" class="mybutton myblue">2</a> 
 
    <a href="#" id="2" class="mybutton myblue">3</a> 
 
</div> 
 
</section>

ありがとう!私が見ることができる

答えて

0

唯一のことは、あなたが同じページ上の複数の異なるオブジェクトに対して同じIDタグを使用していることです。 2つ以上の場所で使用する場合は、クラスを使用してください。繰り返す問題の多くに直面するので、あなたは同じIDの複数を持つべきではありません...

+1

ああ。 idをクラスに変更し、問題は修正されました。これは、このような問題を引き起こす可能性が知らなかった、私はいつか修正するつもりだったものでした。将来の素質のためにこれを覚えているでしょう、あなたの助けをありがとう。素晴らしい) – beckman

+0

、私は助けることができ嬉しいです! –

0
<section id="product_container1" class="col-12 product_container"> 
<h1 id="product-h1"> Produkter 1</h1> 
<hr style="width:90%; margin-left:5%"> 
<div class="product_info_container productx"> 
    <img src="bilder/dumleOriginal220.png" alt="Dumle" id="product1" class="product"> 
<h2> Dumle Original 220 g</h2> 
     <p> Dumle brings out the twinkle in your eyes. The goofy sweet is a combination of soft chewy toffee and smooth Fazer Chocolate. The... </p> 

    <div id="button"> <b> Visa produkt information </b> </div> 

<hr style="width:80%; margin-left:5%; margin-top:10px;"> 
</div> 
</section> 

<section id="product_container2" class="col-12 product_container"> 
<h1 id="product-h1"> Produkter 2</h1> 
<hr style="width:90%; margin-left:5%"> 
<div class="product_info_container productx"> 
    <img src="bilder/dumleOriginal220.png" alt="Dumle" id="product1" class="product"> 
    <h2> Dumle Original 220 g</h2> 
     <p> Dumle brings out the twinkle in your eyes. The goofy sweet is a combination of   soft chewy toffee and smooth Fazer Chocolate. The... </p> 

    <div id="button"> <b> Visa produkt information </b> </div> 

<hr style="width:80%; margin-left:5%; margin-top:10px;"> 
</div> 
</section> 

<section id="product_contai`enter code here`ner3" class="col-12 product_container"> 
<h1 id="product-h1"> Produkter 3</h1> 
<hr style="width:90%; margin-left:5%"> 
<div class="product_info_container productx"> 
    <img src="bilder/dumleOriginal220.png" alt="Dumle" id="product1" class="product"> 
    <h2> Dumle Original 220 g</h2> 
     <p> Dumle brings out the twinkle in your eyes. The goofy sweet is a combination of    soft chewy toffee and smooth Fazer Chocolate. The... </p> 

    <div id="button"> <b> Visa produkt information </b> </div> 

<hr style="width:80%; margin-left:5%; margin-top:10px;"> 
</div> 

</section> 
<div id="buttons"> 
    <a href="#product_container1" id="0" class="mybutton myred">1</a> 
    <a href="#product_container2" id="1" class="mybutton myblue">2</a> 
    <a href="#" id="2" class="mybutton myblue">3</a> 
</div> 
<script> 
$(document).ready(function(){ 
$("#0").click(function(){ 
    $("#product_container2").css("display", "none"); 
    $("#product_container3").css("display", "none"); 
    $("#product_container1").css("display", "block"); 
}); 
$("#1").click(function() { 
    $("#product_container1").css("display", "none"); 
    $("#product_container3").css("display", "none"); 
    $("#product_container2").css("display", "block"); 
}); 
$("#2").click(function(){ 
    $("#product_container1").css("display", "none"); 
    $("#product_container2").css("display", "none"); 
    $("#product_container3").css("display", "block"); 
}); 
}); 

</script> 
関連する問題