使用切换或显示/隐藏切换Div内容

我试图按下按钮时显示/隐藏内容。我有2个按钮。我想要一个按钮来显示1 div的内容，并且我想要另一个按钮来隐藏第一个div的内容并显示第二个div的内容。

我创建了一个的jsfiddle这里http://jsfiddle.net/Yn3tt/1/

我的想法是，我可以切换的一类叫做noDisplay这将坐上格设置我不想显示（从而隐藏它）我不知道的jquery要做到这一点？

我也不确定这是否更容易使用jQuery的显示/隐藏类来实现这一目标？

感谢

我的HTML如下：

<button id="opt1">Option 1</button> 
<button id="opt2">Option 2</button> 

<div class="yesDisplay"> 
<p>Show me when I press Option 1 and hide Option 2 content</p> 
</div> 

<div class="noDisplay"> 
<p>Show me when I press Option 2 and Hide Option 1 content</p> 
</div>

和我的CSS简直是

.noDisplay{display:none;} 

.yesDisplay{display:block;}

演示是在这里http://jsfiddle.net/Yn3tt/1/

来源

2013-02-01 Redwall

你可能要重新考虑你的类的命名和使用。看起来这可能会导致一些混乱与否定。这个类似于jquery –

@UrbanBjörkman好点！虽然show hide示例似乎在下面工作...不知道如何做切换方法 – Redwall

使用hide()show() jQuery函数.. click()Ë发泄火的时候，点击......我做了这个尽可能的简单，这样你就会很容易理解

CSS

.noDisplay{display:none;} 
.yesDisplay{display:none;}

JQUERY

$('#opt1').click(function(){ 
    $('.yesDisplay').show(); //class selector for the div to show 
    $('.noDisplay').hide(); 
}); 

$('#opt2').click(function(){ 
    $('.noDisplay').show(); 
    $('.yesDisplay').hide(); 
});

但是你可以使用函数像.. toggle()slideToggle()以减少您的代码

fiddle here

来源

2013-02-01 08:44:21 bipen

感谢您的帮助 – Redwall

欢迎...有趣的编码.. :) – bipen

切换可以是非常缓慢。在此处查看测试：[http://jsperf.com/]（http://jsperf.com/speed-difference-of-toggling-of-visibility-jquery-vs-pu） –

更新您的提琴： http://jsfiddle.net/Yn3tt/3/

$('#opt1').click(function(){ 
    $('.yesDisplay').show(); 
    $('.noDisplay').hide(); 
}); 

$('#opt2').click(function(){ 
    $('.yesDisplay').hide(); 
    $('.noDisplay').show(); 
});

来源

2013-02-01 08:46:28

感谢您的帮助 – Redwall

u can do this without css ,i mean using jquery 
<script> 
     $(".yesDisplay").hide(); 
     $(".noDisplay").hide(); 
    $("#opt1").click(function(){ 
     $(".yesDisplay").show(); 
    $(".noDisplay").hide(); 
}); 


    $("#opt2").click(function(){ 
     $("noDisplay").show(); 
    $(".yesDisplay").hide(); 
}); 
</script> 

<button id="opt1">Option 1</button> 
<button id="opt2">Option 2</button> 

<div class="yesDisplay"> 
<p>Show me when I press Option 1 and hide Option 2 content</p> 
</div> 

<div class="noDisplay"> 
<p>Show me when I press Option 2 and Hide Option 1 content</p> 
</div>

ü可以在这里查看http://jsfiddle.net/Yn3tt/7/

来源

2013-02-01 08:50:49

使用切换或显示/隐藏切换Div内容

回答

相关问题