Оверлейные divs, включая div selector

Question

Внутри контейнера div У меня есть четыре divs, которые я хочу наложить, чтобы в любой момент отображался только один. Каждый из этих четырех divs является одним и тем же размером - скажем, 200x200px. Справа от наложенных divs я хотел бы иметь четыре вертикально выровненных меньших divs, которые не накладываются, и говорят, что они имеют 50 пикселей в высоту. Эти четыре вертикально выровненных divs будут действовать как простое меню, так что при нажатии на соответствующий div из четырех наложенных divs слева отображается тот, который будет отображаться.

Я пытаюсь найти простейшее решение этого идеально с помощью 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

К сожалению, я не хочу, чтобы использовать пользовательский интерфейс. Вот что-то более явное, что я хотел бы получить работу. Четыре наложенных divs (class 'feature') управляются с помощью .hide и .show на основе связанного с ним щелчка меню. Выбор кликов работает (отмечены с помощью предупреждений), но divs не отображаются или не отображаются правильно. Любой вклад в то, что не так и возможно, как оптимизировать повторяющийся код show/hide, очень ценится.

Большое спасибо.

<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

Исправьте Синтаксис прятки show.This будет работать плавно

добавить $('.feature').hide(); до события щелчка так, чтобы все оверлеи скрыты изначально. JS Fiddle Выход: http://jsfiddle.net/saiprasad2k6/8tEna/14/