首页 文章

多个显示/隐藏div与单独的切换

提问于
浏览 次
2

我一直在尝试创建多个div，这些div应该在页面加载时隐藏 . 如果单击相应的按钮，则应显示div，如果再次单击相同的按钮，则应隐藏该div . 此外，如果显示其中一个div并单击另一个按钮，则应显示与该按钮对应的div . 如果再次单击相同的按钮，则div应隐藏 . 我在SO上跟踪了一个线程，并且能够显示与按钮单击相对应的div，但是切换功能不起作用 .

请找小提琴：

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/

任何帮助表示赞赏 .

javascript jquery html css

5 回答

  • 0

    使用not隐藏除了单击的所有内容之外的所有内容，并为所有div设置 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>
    回复于
  • 1

    您可以使用 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>
    回复于
  • 0

    尝试下面的jQuery代码，用jQuery代码替换此代码并检查它将起作用的功能 . 切换功能用于切换隐藏和显示元素 .

    jQuery(function(){
    jQuery('.targetDiv').hide();
    jQuery('.showSingle').click(function(){              
          jQuery('#div'+$(this).attr('target')).toggle();
    });
});
    回复于
  • 2

    首先将所有div的显示属性设置为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();
       });
   });

    你可以做以下小提琴来达到这个目的：https://jsfiddle.net/8pyovyqn/28/

    回复于
  • 1

    已经有很多答案了，但我认为它们都没有像@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);
    });
});

    Fiddle here...

    回复于

相关问题