覆蓋div包括div選擇器

在一個容器div中，我有四個div，我希望覆蓋以便在任何時候只有一個div可見。這四個div中的每一個都是相同的尺寸 - 比方說200x200px。在被覆蓋的divs的右邊，我想要有四個垂直對齊的小divs，但不覆蓋可以說它們每個都是50px高。這四個垂直對齊的div將作爲一個簡單的菜單，所以當點擊時，左邊四個疊加div的關聯div是要顯示的div。覆蓋div包括div選擇器

我想找到最理想的使用jQuery的最簡單的解決方案。我曾經玩過一些東西，但我對jquery的知識並不適合工作。

任何有關解決方案的提示或簡單地探索進一步的方法將不勝感激。這將被部署爲wordpress主題的一部分，所以如果有人知道一個插件完成這個，那麼這將是很棒的，但我懷疑不太可能。

非常感謝。

來源

2013-05-08 user2363171

尋找TABS形式的JQuery UI？ http://jqueryui.com/tabs/#vertical

在JSFIDDLE

$(function() { 
    $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); 
    $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left"); 
    });

CSS

.ui-tabs-vertical { width: 55em; } 
    .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; } 
    .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; } 
    .ui-tabs-vertical .ui-tabs-nav li a { display:block; } 
    .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; } 
    .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}

來源

2013-05-08 16:38:50

工作實例不幸的是，我不希望使用的用戶界面。這裏有一點更明確，我想工作。四個疊加的div（class'feature'）由.hide和.show根據被點擊的相關菜單div來操縱。點擊選擇工作（與警報檢查），但divs不顯示或隱藏正確。任何關於什麼是錯誤的輸入以及如何優化重複的顯示/隱藏代碼都非常感謝。

非常感謝。

<div id="container"> 
    <div id="feature1" class="feature">feature 1</div> 
    <div id="menu_feature1" class="menu_feature">menu 1</div> 
    <div id="feature2" class="feature">feature 2</div> 
    <div id="menu_feature2" class="menu_feature">menu 2</div> 
    <div id="feature3" class="feature">feature 3</div> 
    <div id="menu_feature3" class="menu_feature">menu 3</div> 
    <div id="feature4" class="feature">feature 4</div> 
    <div id="menu_feature4" class="menu_feature">menu 4</div> 
</div> 

<script> 
    $("#menu_feature1").click(function() { $('.feature').hide; $('#feature1').show; }); 
    $("#menu_feature2").click(function() { $('.feature').hide; $('#feature2').show; }); 
    $("#menu_feature3").click(function() { $('.feature').hide; $('#feature3').show; }); 
    $("#menu_feature4").click(function() { $('.feature').hide; $('#feature4').show; }); 
</script>

來源

2013-05-09 07:12:50 user2363171

請更正隱藏的語法和show.This將工作無縫

click事件前加$('.feature').hide();，使所有的覆蓋最初隱藏。 JS小提琴輸出：http://jsfiddle.net/saiprasad2k6/8tEna/14/

來源

2013-05-09 07:52:06

這是一種享受 - 非常感謝Sai :-) – user2363171 2013-05-10 04:37:28

覆蓋div包括div選擇器

回答

相關問題