切換多個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元素

回答

相關問題