Измените содержание div на кнопку и покажите кнопку как выбрано

Question

Я работаю над страницей для клиента и имею баннер с тремя кнопками, на котором нажата кнопка отображения другого div. Все это прекрасно работает благодаря некоторым просмотрам здесь ранее.

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

Ниже приведен рабочий код, любые указатели были бы очень благодарны!

<script> 
$(document).ready(function() { 
$("#buttons a").click(function() { 
var id = $(this).attr("id"); 
$("#pages div").css("display", "none"); 
$("#pages div#" + id + "").css("display", "block"); 
}); 
$("#pages div:not(#1)").css("display", "none"); 
}); 
</script> 


<div id="pages"> 
<div id="1"> 
    <p>Content 1</p> 
</div> 

<div id="2"> 
<p>Content 2</p> 
</div> 

<div id="3"> 
<p>Content 3</p> 
</div> 

<div id="buttons"> 
<a href="#" id="1"><img src="/img/ffb.gif" class="rollover" alt="" /></a> 
<a href="#" id="2"><img src="/img/ryp.gif" class="rollover" alt="" /></a> 
<a href="#" id="3"><img src="/img/ite.gif" class="rollover" alt="" /></a> 
</div> 

Answer 1

Просто добавьте класс "выбранные" для кнопок в вашем CSS, и добавить в функцию JQuery:

<script> 
$(document).ready(function() { 
    $("#buttons a").click(function() { 
    var id = $(this).attr("id"); 
    $("#pages div").css("display", "none"); 
    $("#pages div#" + id + "").css("display", "block"); 
    //Add this lines 
    $("#buttons a.selected").removeClass('selected'); 
    $(this).addClasss('selected'); 
    }); 
$("#pages div:not(#1)").css("display", "none"); 
}); 
</script> 

[EDIT]

Вы пытаетесь сделать горизонтальное меню с изображениями, а некоторое содержимое и это? Если да, то вы можете использовать этот кусок кода jsFiddle : horizontal menu ...

[EDIT 2]

Чтобы сделать это работает, вы должны назвать выбранный IMG, как это imgname_selected.gif Так используйте этот JQuery

<script> 
$(document).ready(function() { 
    $("#buttons a").click(function() { 
    var id = $(this).attr("id"); 
    $("#pages div").css("display", "none"); 
    $("#pages div#" + id + "").css("display", "block"); 
    //Add this lines 
    $("#buttons a> img[src*='_selected'").attr('src',$("#buttons a> img[src*='_selected'").attr('src').replace('_selected', '')); 
    $(this).attr('src',$(this).attr('src').replace('.', '_selected.')); 
    }); 
$("#pages div:not(#1)").css("display", "none"); 
}); 
</script> 

[EDIT 3]

Это Workin g fiddle. Конечно, вы должны изменить функцию js с хорошей заменой src. (Что-то вроде этого)

$("#buttons a.selected").removeClass('selected'); 
    $(this).addClass('selected'); 
    $("#buttons a:not(.selected)").each(function() { 
    if($(this).find("img").attr('src').indexOf('_selected')>0) {   
     $(this).find("img").attr('src', $(this).find("img").attr('src').replace('_selected', '')); 
    } 
    }); 
    $(this).find('img').attr('src',$(this).find('img').attr('src').replace('.', '_selected')); 

Имейте в виду, что в этом конф, вы должны быть уверены, что Img имена не мало «»! Вы можете приспособить это, как вы wan't ...

WARINING
В вашем HTML, можно использовать те же идентификаторы для div и a ... /! \ ID должны быть UNIQUE в целом из DOM !! Я изменил его в Fiddle.

MORE

Просто для информации, если я был в вашем случае, я импользовать CSS фон добавлять изображения, а просто добавить «выбранный» класс которым будет просто изменить фон!

Answer 2

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

<input type='radio' /> 

Answer 3

Попробуйте

$(document).ready(function() { 
    var pages = $("#pages > div").not('#buttons'); 
    $("#buttons a").click(function() { 
     var id = $(this).attr("id"); 
     pages.css("display", "none"); 
     $("#" + id + "").css("display", "block"); 
    }); 
    pages.not(':first').css("display", "none"); 
}); 

Демо: Fiddle