我的.click jquery函数遇到了问题。我想要发生的事情：当我按下按钮时，一个div应该显示：none，另一个应该显示：block。这是我第一次按下按钮时，但在此之后没有任何反应。
以下是一些代码：
$(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">
<h1 id="product-h1"> Produkter </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"></img>
<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>
<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">
<h1 id="product-h1"> Produkter </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"></img>
<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>
<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">
<h1 id="product-h1"> Produkter </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"></img>
<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>
<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 :(得分：0)
我唯一能看到的是你在同一页面上为多个不同的对象使用相同的id标签。如果您在多个地方使用它，请使用课程！你永远不应该有多个相同的id，因为你将面临许多重复的问题......
答案 1 :(得分：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>