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

我有2个div，我希望能够在它们之间切换onClick按钮（当前使用.toggle（）;）（jQuery）将div样式“display：none”切换为“display：inline”

显示在页面上的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'); 


     } 


    }); 
});

来源

2012-03-17 Dean

我会用.toggleClass()为拨动开关display: inline;和display: block;

之间创建一个隐藏和内联类只需拨动那些。

来源

2012-03-17 13:29:12 mikevoermans

我想这一点，但DIV2不显示。我更新了我的问题中的代码。 – Dean 2012-03-17 14:04:59

我的错误，我在问题中使用的脚本正在工作！忘记清除缓存:)谢谢！ – Dean 2012-03-17 14:07:35

使用普通的JavaScript，你可以使用：

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

来源

2012-03-17 13:44:47 c24w

这里有一个简单的方法来做到这一点：

对于HTML，我们有一个简单的按钮来调用 “toggleFunction”如果需要的话，将会向我们的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>
我们会设置的默认的显示属性1区和2区为 “内联” 及 “无”，这样默认情况下：
- 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来添加和删除 “显示无” 和通过在点击按钮时调用我们的“toggleFunction”，分别为Div 1和Div 2的“显示在线”类。

这里是Jquery的为：

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

你可以尝试一下在这里codepen：http://codepen.io/anon/pen/vEbXwG

来源

2015-03-24 11:52:28 Ope

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

回答

相关问题