0

在一个容器 div 中，我有四个 div 我希望覆盖，以便在任何时候都只有一个可见。这四个 div 中的每一个都是相同的尺寸 - 比如说 200x200px。在覆盖 div 的右侧，我想要四个垂直对齐的未覆盖的较小 div，假设它们每个 50 px 高。这四个垂直对齐的 div 将充当一个简单的菜单，因此当单击左侧四个重叠 div 的关联 div 时，将显示一个。

我正在尝试使用 jquery 找到最简单的解决方案。我玩过一些东西，但我对 jquery 的了解并不能胜任这项工作。

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

非常感谢。

4

3 回答 3

0

寻找 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-08T16:38:50.923 回答
0

不幸的是，我不想使用 ui。这是我想开始工作的更明确的内容。四个覆盖的 div（“功能”类）由 .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>
于 2013-05-09T07:12:50.723 回答
0

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

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

于 2013-05-09T07:52:06.497 回答