Переключатель на JS
Иногда необходимо в одном и том же месте страницы выводить два или более блоков с контентом, с возможностью выбора.
Так же иногда полезно держать на странице скрытую информацию и выводить ее только после клика по какой нибудь кнопочки.
Для всего этого нам необходимо воспользоваться Ajax, который в свою очередь поможет нам в реализации задуманного.
Для того чтобы нам начать писать скрипт, нам необходимо сначала сверстать кнопочки и блоки, а так же присвоить им идентификатор (уникальный id) который будет определять нужный нам блок.
Ниже приведу полный html код с уже готовым скриптом
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<style>
input {padding:7px 32px;}
#block_1,#block_2 {width:260px;padding:10px;}
#block_1 {border:1px solid #D8F0FF;background: #EDF4FF;}
#block_2 {border:1px solid #D8FFDC;background: #EAFFEF;}
</style>
<script>
$('input[name="block_1"]').live('click', function(){
$.ajax({
success: function(data) {
$('#block_1').attr('style','display:block');
$('#block_2').attr('style','display:none');
}});
});
$('input[name="block_2"]').live('click', function(){
$.ajax({
success: function(data) {
$('#block_2').attr('style','display:block');
$('#block_1').attr('style','display:none');
}});
});
</script>
</head>
<body>
<input type="button" name="block_1" value="Кнопочка 1">
<input type="button" name="block_2" value="Кнопочка 2">
<div id="block_1" style="display:none">
текст для блока 1
</div>
<div id="block_2" style="display:none">
текст для блока 2
</div>
</body>
</html>
Теперь объясню его работу.
У нас есть кнопочка с name block_1 и скрытый div с идентификатором block_1.
При клике на input
$('input[name="block_1"]').live('click', function()Выполняем правку hml кода
$('#block_2').attr('style','display:block');
$('#block_1').attr('style','display:none');Первый блок раскрываем, а второй скрываем, если он был открыт.
Со вторым все точно так же.
demo версия
0 комментариев