Question

在容器div中，我有四个我想叠加的div，这样任何时候都只能看到一个。这四个div中的每一个都是相同的维度 - 比方说200x200px。在叠加的div的右边，我想要有四个垂直对齐的较小的div，它们没有重叠，可以说它们每个都是50 px高。这四个垂直对齐的div将作为一个简单的菜单，以便在单击时左侧四个重叠div的相关div是要显示的div。

我正在尝试使用jquery找到最简单的解决方案。我玩过一些东西，但是我对jquery的了解并不适合。

关于解决方案的任何提示或仅仅是进一步探索的方法将非常感激。这将被部署为wordpress主题的一部分，所以如果有人知道一个插件正是这样做那么那将是很棒但我怀疑不太可能。

非常感谢。

Answer 1

寻找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;}

Answer 2

不幸的是我不想使用ui。这是一个更明确的东西，我想要工作。四个重叠的div（类'feature'）由.hide和.show根据被点击的相关菜单div操纵。单击选择有效（通过警报检查）但div不能正确显示或隐藏。任何有关错误的输入以及可能如何优化重复显示/隐藏代码都非常有用。

非常感谢。

    <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>

Answer 3

请更正隐藏和显示的语法。这将无缝地工作

在点击事件之前添加$('.feature').hide();，以便最初隐藏所有叠加层。 JS小提琴输出：http://jsfiddle.net/saiprasad2k6/8tEna/14/

覆盖div包括div选择器

3 个答案: