单击任一按钮时如何防止两个div同时切换内容

3回答

慕少森

$("p[class*=toggle]:not(p." + this.className + ")").hide();$("button").click(function() {  $("p[class*=toggle]:not(p." + this.className + ")").hide();  $("p." + this.className).toggle("slow");});p {  background: #dad;  font-weight: bold;  font-size: 16px;}<script src="https://code.jquery.com/jquery-3.4.1.js"></script><button class="toggle1">Toggle 1</button><button class="toggle2">Toggle 2</button><p class="toggle1">Hiya</p><p class="toggle2">Such interesting text, eh?</p>注意：- 首先您需要隐藏所有divs& 然后通过单击按钮，您需要使用this函数显示特定的 div。

陪伴而非守候

试试这个：-$("button").click(function() {  $("p[class*=toggle]:not(p."+this.className+")").hide();  $("p."+this.className).toggle("slow");});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><style type="text/css">p[class*=toggle] {display:none}p {  background: #dad;  font-weight: bold;  font-size: 16px;}</style><button class="toggle1">Toggle 1</button><button class="toggle2">Toggle 2</button><button class="toggle3">Toggle 3</button><p class="toggle1">Hiya</p><p class="toggle2">Such interesting text, eh?</p><p class="toggle3">Another one</p>

莫回无

您可以通过使用只需修改代码的隐藏和显示功能来做到这一点。var isButtonClicked=[]$(document).ready(function(){  $("p").hide();   $("button").click(function(){      var currentClass=$(this).attr("class");      if($.inArray(currentClass,isButtonClicked)==-1)      {        $("p").hide("slow");        $("p."+currentClass).show("slow");        isButtonClicked.push(currentClass);      }      else{         alert("second time you clicked")         $(this).hide()      }   })})<html><head>  <meta charset="utf-8">  <title>toggle demo</title>  <style>    p {      background: #dad;      font-weight: bold;      font-size: 16px;    }  </style></head><body>  <button class="toggle1">Toggle 1</button>  <button class="toggle2">Toggle 2</button>  <p class="toggle1">Hiya</p>  <p class="toggle2">Such interesting text, eh?</p></body></html><script src="https://code.jquery.com/jquery-3.4.1.js"></script>