logo标签列表

多个显示/隐藏的div并带有单独的切换

javascriptjqueryhtmlcss
3
我一直在尝试创建多个div，这些div应该在页面加载时隐藏。如果单击相应的按钮，则应显示该div，并且如果再次单击相同的按钮，则应将其隐藏。此外，如果其中一个div正在显示并单击另一个按钮，则应显示与该按钮对应的div。如果再次单击相同的按钮，则应隐藏该div。 我已经在SO上关注了相同的主题，并能够显示与按钮点击相对应的div，但切换功能无法正常工作。
请查看fiddle： 

jQuery(function() {
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <a class="showSingle" target="1">Div 1</a>
  <a class="showSingle" target="2">Div 2</a>
  <a class="showSingle" target="3">Div 3</a>
  <a class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

https://jsfiddle.net/8pyovyqn/3/

欢迎提供任何帮助。

5个回答
2
你可以使用“toggle”来实现你的需求： 

jQuery(function(){
    jQuery('.showSingle').click(function(){
       var target = $(this).attr('target');
        $('#div'+target).toggle('.hide');
    });
});
.targetDiv{
 display: none;
}

.hide{
 display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">

<a  class="showSingle" target="1">Div 1</a>
<a  class="showSingle" target="2">Div 2</a>
<a  class="showSingle" target="3">Div 3</a>
<a  class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

2
使用not来隐藏除了点击的那个之外的所有内容，并将style="display:none;"设置为所有
的默认属性，以便将它们隐藏起来。 

$(function() {
  $('.showSingle').click(function() {
    $('.targetDiv').not('#div' + $(this).attr('target')).hide();
    $('#div' + $(this).attr('target')).toggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <a class="showSingle" target="1">Div 1</a>
  <a class="showSingle" target="2">Div 2</a>
  <a class="showSingle" target="3">Div 3</a>
  <a class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>

谢谢Kiran。我已经设置了style="display:none;"，但不知道not。解决方案有效！ - Pravin
1
尝试以下jQuery代码，将此代码替换为您的jQuery代码并检查其功能，它将起作用。toggle函数用于切换隐藏和显示元素。
jQuery(function(){
    jQuery('.targetDiv').hide();
    jQuery('.showSingle').click(function(){              
          jQuery('#div'+$(this).attr('target')).toggle();
    });
});
1

首先将所有div的display属性设置为none：

<div class="buttons">    
    <a  class="showSingle" target="1">Div 1</a>
    <a  class="showSingle" target="2">Div 2</a>
    <a  class="showSingle" target="3">Div 3</a>
    <a  class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv" style="display:none;">Lorum Ipsum1</div>
<div id="div2" class="targetDiv" style="display:none;">Lorum Ipsum2</div>
<div id="div3" class="targetDiv" style="display:none;">Lorum Ipsum3</div>
<div id="div4" class="targetDiv" style="display:none;">Lorum Ipsum4</div>

然后像下面这样切换div：
jQuery(function(){
       jQuery('.showSingle').click(function(){      
           $('.targetDiv').not('#div' + $(this).attr('target')).hide();        
           $('#div'+$(this).attr('target')).toggle();
       });
   });

您可以像下面的jsfiddle示例一样来实现： https://jsfiddle.net/8pyovyqn/28/
感谢您的回答。切换功能已经可以使用，但是我希望在点击另一个按钮时立即隐藏前一个 div。我只想一次显示一个 div。在当前的解决方案中，如果我点击第一个按钮，则会显示第一个 div，如果我然后点击第二个按钮，则第二个 div 会显示在第一个 div 下面。我希望将第二个 div 显示在第一个 div 的位置上。 - Pravin
我已经编辑了我的点击函数，只需在切换之前添加$('.targetDiv').not('#div' + $(this).attr('target')).hide();。您还可以检查我上面编辑的jsfiddle。 - Sumit Bhattarai
0

已经有很多答案了，但我认为没有一个能像@Pravin想要的那样工作。

所以这是我的建议：

jQuery(function(){
    jQuery('.showSingle').click(function(){
          var objdiv = $('#div'+$(this).attr('target'));
          var toggleDisplay = false;
          if(objdiv.css('display')=="none"){
                toggleDisplay = true;
          }
          jQuery('.targetDiv').hide();
          objdiv.toggle(toggleDisplay);
    });
});

在这里测试...

谢谢Edwin。是的，我的需求略有不同。您提供的解决方案可以按照我的要求工作。 - Pravin
你能否将我的答案标记为正确的吗？谢谢！ - Edwin Krause
好的，我可以看到Kiran的答案比我的稍微更优雅一些 :-) - Edwin Krause
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接