打开新div时关闭div（jQuery幻灯片）

我有多个div出现时，点击链接。问题是，如果一个div已经可见，则会在下面显示一个新div。如何用新的替换“旧”的

jQuery("#div_to_show").hide();
jQuery(".toggle_link").show();

jQuery('.toggle_link').click(function(){
jQuery("#div_to_show").slideToggle();


jQuery("#div_to_show2").hide();
jQuery(".toggle_link2").show();

jQuery('.toggle_link2').click(function(){
jQuery("#div_to_show2").slideToggle();


jQuery("#div_to_show3").hide();
jQuery(".toggle_link3").show();

jQuery('.toggle_link3').click(function(){
jQuery("#div_to_show3").slideToggle();

---

使用多个div进行演示：

在运行slideToggle（）之前，可以隐藏其他div

---

在运行slideToggle（）之前，可以隐藏其他div

---

我将使用一个单独的div，其中没有任何内容可用于显示用户单击的内容：

<!-- these divs stay hidden; they are just used to store the data you want to display later -->
<div id="iscriversi">div1</div>
<div id="collaborare">div2</div>
<div id="sostenerci">div3</div>

<!-- placeholder where content will be displayed when user clicks -->
<div id="target_container"></div>

工作区：

---

我将使用一个单独的div，其中没有任何内容可以用来显示用户单击的内容：

<!-- these divs stay hidden; they are just used to store the data you want to display later -->
<div id="iscriversi">div1</div>
<div id="collaborare">div2</div>
<div id="sostenerci">div3</div>

<!-- placeholder where content will be displayed when user clicks -->
<div id="target_container"></div>

工作区：

---

您的代码中有许多地方可以改进。首先，您不需要

3

jquerydocumentready

函数。当网页加载时，您只需要一个来初始化代码。您可以使用

类来简化代码。但主要需要做的是在切换或显示新div之前隐藏所有div。希望这段代码能帮助您了解它是如何工作的

HTML

<a class="toggle" data-target="iscriversi">...iscriversi</a><br>
<a class="toggle" data-target="collaborare">...collaborare</a><br>
<a class="toggle" data-target="sostenerci">...sostenerci</a>
<div id="iscriversi" class="div">div1</div>
<div id="collaborare" class="div">div2</div>
<div id="sostenerci" class="div">div3</div>

拨弄

您的代码中有许多地方可以改进。首先，您不需要
3
jquerydocumentready
函数。当网页加载时，您只需要一个来初始化代码。您可以使用
类来简化代码。但主要需要做的是在切换或显示新div之前隐藏所有div。希望这段代码能帮助您了解它是如何工作的

HTML

<a class="toggle" data-target="iscriversi">...iscriversi</a><br>
<a class="toggle" data-target="collaborare">...collaborare</a><br>
<a class="toggle" data-target="sostenerci">...sostenerci</a>
<div id="iscriversi" class="div">div1</div>
<div id="collaborare" class="div">div2</div>
<div id="sostenerci" class="div">div3</div>

拨弄

我的建议是让这一切顺利进行

HTML

<a class="iscriversi_toggle aShow">...iscriversi</a>
<br>
<a class="collaborare_toggle aShow" >...collaborare</a>
<br>
<a class="sostenerci_toggle aShow">...sostenerci</a>

<div id="iscriversi" class="divtoggle">div1</div>
<div id="collaborare"  class="divtoggle">div2</div>
<div id="sostenerci"  class="divtoggle">div3</div>

我在代码中有注释，所以很容易理解。这比您最初拥有的更干净，并且更具可扩展性。另外，作为一个方面，您不需要反复指定
jQuery（document）.ready（function（）{
。您应该只使用一次

最后，这里是一个JSFIDLE演示：这里是我的建议，让这一切都能正常工作

HTML

<a class="iscriversi_toggle aShow">...iscriversi</a>
<br>
<a class="collaborare_toggle aShow" >...collaborare</a>
<br>
<a class="sostenerci_toggle aShow">...sostenerci</a>

<div id="iscriversi" class="divtoggle">div1</div>
<div id="collaborare"  class="divtoggle">div2</div>
<div id="sostenerci"  class="divtoggle">div3</div>

我在代码中有注释，因此很容易理解。这比您最初拥有的要干净一些，并且更具可扩展性。另外，作为一个方面，您不需要反复指定
jQuery（document）.ready（function（）{
。您应该只使用一次

最后，这里是一个JSFIDLE演示：
我还鼓励您回顾所有问题，并对所有对您有帮助的答案进行投票。我还鼓励您回顾所有问题，并对所有对您有帮助的答案进行投票。
<a class="iscriversi_toggle aShow">...iscriversi</a>
<br>
<a class="collaborare_toggle aShow" >...collaborare</a>
<br>
<a class="sostenerci_toggle aShow">...sostenerci</a>

<div id="iscriversi" class="divtoggle">div1</div>
<div id="collaborare"  class="divtoggle">div2</div>
<div id="sostenerci"  class="divtoggle">div3</div>

jQuery(document).ready(function(){
    // Hide all the divtoggle tags, and show the anchors
    jQuery ('.divtoggle').hide();
    jQuery(".aShow").show();

    jQuery('.iscriversi_toggle').click(function(){
    // Hide all the DIVs, and show just the one we want
        jQuery ('.divtoggle').hide();
        jQuery("#iscriversi").slideToggle();
    });

    jQuery('.collaborare_toggle').click(function(){
    // Hide all the DIVs, and show just the one we want        
        jQuery ('.divtoggle').hide();
        jQuery("#collaborare").slideToggle();
    });

    jQuery('.sostenerci_toggle').click(function(){
    // Hide all the DIVs, and show just the one we want        
        jQuery ('.divtoggle').hide();
        jQuery("#sostenerci").slideToggle();
    });

});