切换多个div元素

在我的页面上我正在做这样的事情：http://jsfiddle.net/FBCSt/6/我真的不知道为什么，但在Chrome中我遇到了一些奇怪的问题 - 有时div元素的内容没有正确加载。在IE浏览器中，Safari和Firefox工作正常，但正如我所说的，在Chrome中导致一些麻烦。切换多个div元素

这就是为什么我想知道，如果有更圆滑的方式来做到这一点？（有三个按钮，每一个被分配到一个DIV只有一格应该是可见的。）

我感谢每一个答案=）

编辑：谢谢大家。这是解决方案。它工作得很好=）

“更好的办法：jsfiddle.net/FBCSt/13 - @Mohammed ElSayed 20分钟前”

来源

2012-08-24 Chronnie

为什么要重新发明轮子？ http://jqueryui.com/demos/tabs/ – MetalFrog

@MetalFrog你不是真的建议包括100k的jQuery UI代码来替换他的80字节的jsFiddle代码是你吗？ – AlienWebguy

我得到了错误是什么问题。即使你做了显示和隐藏，也有一个类有一个css'display：none'叫做.content，它使得所有三个在chrome中仍然不可见。我认为你不应该把它们放在使用css class use document.ready的地方。 –

试试这个：http://jsfiddle.net/FBCSt/10/

来源

2012-08-24 18:42:12 user1512616

更好的方法：http://jsfiddle.net/FBCSt/13/ –

这真棒！非常感谢你@MohammedElSayed！并感谢所有其他人，也= – Chronnie

在IE，Safari和Firefox浏览器工作正常，但正如我所说的，在Chrome中是造成一些麻烦。

我真的在谷歌浏览器19.0.1084下测试时看不到问题。但无论如何，

这就是为什么我想知道，如果有一个更圆滑的方式来做到这一点？

是的，有。由于你的一个标签是jQuery，我建议你看看jQuery UI的tabs。

来源

2012-08-24 18:43:46 Chris

为什么不使用show（）而不是toggle（）？也许这个问题与使用toggle（）有关。你可以结合的元素被隐藏：例如，

$('#page2,#page3').hide();  
$('#page1').show();

或者作为很好的穆罕默德说，

$('#page1').show().siblings().hide();

来源

2012-08-24 18:46:19 alijsh

感谢提及;） –

我已经在做这个网址的解决方案：pastebin它在Chrome和也FF.also也可以工作，即使你在页面＃100上添加了1000个ID，但它仍然不会有太多的代码。谢谢。

来源

2012-08-24 18:55:46

这是一个小的代码更改。问题是你试图处理元素使用jQuery使用id，但它已经应用display：none使用类“.content” –

像Abody97说：尽量JQuery的UI选项卡

如果您正在寻找这样做的“更时尚”的方式，试试这个小提琴：http://jsfiddle.net/NCbW6/

它不与特定的ID打扰每个元素都可以在不改变JS的情况下添加尽可能多的元素。

来源

2012-08-24 19:00:12 Scadoodles

切换多个div元素

回答

相关问题