Question

我有2个div，我希望能够在点击按钮之间切换它们（目前使用.toggle（）;）

页面上显示的div是div1。这个div的风格是'display：inline'。我的另一个div（div2）以样式'display：none'开头。

当div1切换到div2时，我希望div2的样式为“display：inline”。我该怎么做？

编辑：这是有效的：

$(function(){
  $('#button').click(function(){

    $('#div1').toggleClass('hide');

if ($('#div2').is('.hidden')) {

          $('#div2').removeClass('hidden');
          $('#div2').addClass('show');


      }
      else{

          $('#div2').addClass('hidden');
          $('#div2').removeClass('show');


      }


  });
});

Answer 1

我会使用.toggleClass()作为display: inline;和display: block;之间切换切换

创建一个隐藏的内联类，只需切换它们。

Answer 2

使用纯JavaScript，您可以使用：

document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'inline';

Answer 3

这是一种简单的方法：

对于html，我们有一个简单的按钮来调用＆＃34; toggleFunction＆＃34;这将根据需要为我们的Div元素添加和删除显示类。

<button onclick="toggleFunction()" >Click to toggle</button>

<div id="div1" class=" " > Now showing "Div 1" </div>

<div id="div2" class=" " > Now showing "Div 2" </div>
我们会将 Div 1 和 Div 2 的默认显示属性设置为＆＃34; inline＆＃34;和＆＃34;无＆＃34;分别，默认情况下：
- Div 1 ，
- Div 2 已隐藏。

以下是css：

#div1 {
    display: inline;
    color:blue;
}

#div2 {
    display: none;
    color:red;
}

.display-none {
    display: none !important;
}

.display-inline {
    display: inline !important;
}

最后，我们将使用Jquery添加和删除＆＃34; display-none＆＃34;和＃34;显示内联＆＃34;通过调用我们的＆＃34; toggleFunction＆＃34;分别为Div 1和Div 2点击按钮时。

这是Jquery：

  function toggleFunction() {
    $("#div1").toggleClass("display-none");    
    $("#div2").toggleClass("display-inline");    
  }

您可以在此处尝试使用codepen：http://codepen.io/anon/pen/vEbXwG

Answer 4

制作您自己的 if 子句来切换 div 的样式：

$(document).on("click","#mybutton",function(){
  var toggled=$("#mydiv");
  
  // instead of this which would make a block appear
  // toggled.toggle();
  
  // do this: create your own toggle if clause.
  if(toggled.is(":visible"))
    toggled[0].style.display="none";
  else
    toggled[0].style.display="inline";
});

#mydiv{
 display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mydiv">hello</div>
<button id="mybutton">toggle</button>

（jQuery）将div样式“display：none”切换为“display：inline”

4 个答案: