Скрытие div, нажатие на другое

Question

У меня есть четыре кнопки и четыре над ним. Я хочу только один div во время, но продолжаю показывать четыре кнопки.

Вот это HTML для кнопок

HTML

<div id="container"> 
<a><p id="firstBtn" class="mediabutton"><span class="icon"></span>button1</p></a> <!-- 1st button --> 
<div id="firstDiv" class="mediaoptions" > 
... <!-- stuff of the div --> 
</div> 

<a><p id="sndBtn" class="mediabutton active"><span class="icon"></span>button2</p></a> <!-- 2st button --> 
<div id="sndDiv" class="mediaoptions" > 
... <!-- stuff of the div --> 
</div> 

Это, как я могу recogniz, какая кнопка была нажата

Javascript

$("container").click(function(event){ 
var that = event.target.id; 
if(((that == "firstBtn") || (that == "sndBtn") || (that == "trdBtn") || (that == "fourBtn")) 
    && !($("#"+that).hasClass("active")) 
) 
{ 
    //Here comes the stuff 
} 
}); 

Теперь. Класс active позволяет кнопке быть выделенной. Я хочу выделить только одну кнопку. sndDiv установлен на display : block, остальные установлены на display: none.

Выполнение рекомендации: я хочу нажать кнопку, показать div над ним и скрыть всех остальных. Я очень много пробовал, но я потерпел неудачу.

Извините за мой английский, приветствия.

Answer 1

Просто замените Btn с Div, и у вас есть элемент, который вы хотите, чтобы показать, что другие имеют общий класс и легко предназначаться:

$("#container").on('click', '.mediabutton', function(event){ 
    var that = event.target.id, 
     elem = $('#' + that.replace('Btn','Div')); 

    if(!$("#"+that).hasClass("active")) { 
     $('.mediaoptions').not(elem).hide(); 
     elem.show() 
    } 
}); 

Answer 2

Не выполняйте работу jQuery .hide() и .show()?

http://api.jquery.com/hide/

Answer 3

Добавьте вторую строку ниже вашего JavaScript и посмотреть, что насторожило:

var that = event.target.id; 
alert(that); 

Я не знаю точно, что вы пытаетесь достичь, возможно, что-то вроде:

<a href="#" onclick="$('.mediaoptions').hide(); $('#sndDiv').show(); return false;"><p id="sndBtn" class="mediabutton active"><span class="icon"></span>button2</p></a> 

Answer 4

См. Этот пример: JsFiddle. Я сделал некоторые обновления на javascript и html;

$(".mediabutton").click(function(event){ 
$(".mediabutton").removeClass("active"); 
$(this).addClass("active"); 

$(".mediaoptions").hide(); 
$("#"+$(this).data("target-div")).show(); 
}); 

Answer 5

Следующая должно работать.

$("container").click(function(event){ 
    var that = event.target.id; 
    if(((that == "firstBtn") || (that == "sndBtn") || (that == "trdBtn") || (that == "fourBtn")) && !($("#"+that).hasClass("active"))) 
    { 
     $('.mediaoptions').show(); 
     $('#'+that.replace('Btn','Div')).show(); 
    } 
}); 

Answer 6

Здесь работает jsFiddle: http://jsfiddle.net/CtqUU/

При этом вы можете иметь столько, сколько <div> и <button> элементы, как вы хотите. Измените имена class и id по мере необходимости, чтобы соответствовать тем, что вам нужно.

HTML:

<div class="hidden" id="box1">Box 1</div> 
<button value="box1">Box 1</button> 
<div class="hidden" id="box2">Box 2</div> 
<button value="box2">Box 2</button> 

CSS:

div { 
     width: 200px; 
     height: 200px; 
     border: 1px solid #000000; 
    } 
    .hidden { 
     display: none; 
     visibility: hidden; 
    } 

JS:

$("button").click(function(){ 
     var val = $(this).val(); 
     $("div").addClass("hidden"); 
     $("#"+val).removeClass("hidden"); 
    }); 

Answer 7

Я ненавижу просто указать вам ссылку, но я создал очень легкий скрипт JQuery для напишите так, как вы могли бы найти полезным: http://cferdinandi.github.com/tabby/.

Возможно, вам будет проще просто переназначить это, чем попытаться изменить существующий код для работы.