Javascript （jQuery）切换div样式；显示：无“；至；显示：inline"；

我有两个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');


      }


  });
});

我会在

display:inline和
显示：块

创建一个隐藏的内联类并切换它们。
使用普通JavaScript，您可以使用：

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

下面是一个简单的方法：

对于html，我们有一个简单的按钮来调用“toggleFunction”，它将根据需要向Div元素添加和删除显示类

单击以切换

现在显示“Div 1”

现在显示“Div 2”

我们将分别将Div 1和Div 2的默认显示属性设置为“inline”和“none”，以便在默认情况下：


显示第1部分，并且
div2被隐藏

以下是css：

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

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

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

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

最后，我们将使用Jquery在单击按钮时调用“toggleFunction”，分别向div1和div2添加和删除“display none”和“display inline”类
以下是Jquery：

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

您可以在codepen上尝试以下操作：
创建您自己的
if
子句以切换div的样式：


$（文档）。在（“单击”、“#我的按钮”上，函数（）{
var-toggled=$（“#mydiv”）；
//而不是出现一个块
//toggled.toggle（）；
//执行此操作：创建自己的toggleif子句。
如果（切换的.is（“：可见”））
已切换[0]。style.display=“无”；
其他的
已切换[0]。style.display=“inline”；
});
#mydiv{
显示：无；
}

你好
切换
我正在尝试此操作，但div2没有显示。我更新了问题中的代码。我的错误是，我在问题中使用的脚本正在工作！忘记清除缓存：）谢谢！