覆盖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选择器

回答

相关问题