Плавное появление и исчезновение двух блоков при выборе одного из них
Уважаемые знатоки,
наглядный пример тут http://fsd564.bget.ru/example2/index.html Необходимо сделать, что бы при выборе варианта "Выбор 1" плавно раскрывался "БЛОК 1", но при выборе варианта "Выбор 2" плавно раскрывался "БЛОК 2", а "БЛОК 1" при этом закрывался. И обратно - при выборе варианта "Выбор 1" закрывался "БЛОК 2" и раскрывался "БЛОК 1"
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#show').click(function(){
$('#layer').show('slow');
});
$('#show2').click(function(){
$('#layer2').show('slow');
});
});
</script>
<input type="radio" name="type" value="1" id="show">Выбор 1
<input type="radio" name="type" value="2" id="show2">Выбор 2<br>
<div ID="layer" style="display:none;">БЛОК 1</div>
<div ID="layer2" style="display:none;">БЛОК 2</div>
Дополнение: если можно, то желательно что бы изначально при открытии страницы уже стоял указатель на Выборе 1 с раскрытым "БЛОК 1" |
добавьте .hide(); в функции клика
|
animhotep
нельзя ли поподробнее, в javascript не разбираюсь совсем |
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#show').click(function(){
$('#layer2').hide();
$('#layer').show('slow');
});
$('#show2').click(function(){
$('#layer').hide();
$('#layer2').show('slow');
});
});
</script>
<input type="radio" name="type" value="1" id="show">Выбор 1
<input type="radio" name="type" value="2" id="show2">Выбор 2<br>
<div ID="layer" style="display:none;">БЛОК 1</div>
<div ID="layer2" style="display:none;">БЛОК 2</div>
|
animhotep премного благодарен за помощь:)
|
animhotep
Появилась проблема, при изменении типа выбора вариантов с "radio" на "select" второй код отказывается работать в Хроме (при этом он работает в Опере и Мозиле) первый вариант http://fsd564.bget.ru/example2/index.html - работает везде вот второй вариант http://fsd564.bget.ru/example2/index2.html - не хочет работать в Хроме.
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#show').click(function(){
$('#layer2').hide();
$('#layer3').hide();
$('#layer').show('slow');
});
$('#show2').click(function(){
$('#layer').hide();
$('#layer3').hide();
$('#layer2').show('slow');
});
$('#show3').click(function(){
$('#layer').hide();
$('#layer2').hide();
$('#layer3').show('slow');
});
});
</script>
<select name="email_known" style="width:150px" >
<option selected="selected" value="Не выбрано" id="choice"> Выберите </option>
<option value="1" id="show">Выбор 1</option>
<option value="2" id="show2">Выбор 2</option>
<option value="3" id="show3">Выбор 3</option>
</select><br>
<div ID="layer" style="display:none;">БЛОК 1</div>
<div ID="layer2" style="display:none;">БЛОК 2</div>
<div ID="layer3" style="display:none;">БЛОК 3</div>
Думаю проблема в click(function() , наверно ее нужно заменить на функцию аналогичную select, но как это сделать я не представляю |
подход нужен другой. у селекта есть событие при изменении
$("select").change(function () {
alert ( $(this).val() ); //здесь будет значение выбранного пункта 1,2,3
});
|
animhotep спасибо еще раз, разобрался
|
| Часовой пояс GMT +3, время: 10:17. |