Форум

anonimous · #1 (**permalink**) 09.08.2012, 14:31

<div class="doctor_z_4">
    <a href="#" class="fa"> Талон 1 </div>
<div class="block" style="display:none;">
    <div class="zap_tal_1">Время 1</div>
</div>
 
<div class="doctor_z_4">
    <a href="#" class="fa"> талон 2</div>
<div class="block" style="display:none;">
    <div class="zap_tal_1">Время 2</div>
</div>
...
<div class="doctor_z_4">
    <a href="#" class="fa"> талон 10</div>
<div class="block" style="display:none;">
    <div class="zap_tal_1">Время 10</div>
</div>

Вот js

<script type="text/javascript">
$(document).ready (function() {
$('.fa').toggle(function() 
{
$('div.block').show('drop', 2000);
}, function()
{
$('div.block').hide('drop', 2000);
});
});
</script>

Теперь что должно быть, изначально при загрузки страницы, должны быть только ссылки с надписями, талон 1 , талон 2 , талон 3 и тд. а div где время 1, время 2, время 3 быть скрытыми! (P.S.: это всё работает), далее при нажатии на ссылку "талон 1" под этой ссылкой, появляется div "время 1" все остальные div скрыты, при нажатии на ссылку "время 2" появлялся div с "время 2". Только вот надо так чтобы класс был у ссылок 1 и класс в div тоже у всех один и тот же. Ну вроде всё рассписал полностью.

mullih · #2 (**permalink**) 09.08.2012, 14:49

если каждый block поставить в doctor_z_4 а anchor закрыть то можно так

<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$('a.fa').click(function () {
				$('div.block').hide();
				$('div.block', $(this).parent()).show();
				return false;
			});
		});
	</script>
</head>
<body>
	<div class="doctor_z_4">
		<a href="#" class="fa">Талон 1</a>
		<div class="block" style="display: none;">
			<div class="zap_tal_1">
				Время 1</div>
		</div>
	</div>
	<div class="doctor_z_4">
		<a href="#" class="fa">талон 2</a>
		<div class="block" style="display: none;">
			<div class="zap_tal_1">
				Время 2</div>
		</div>
	</div>
	...
	<div class="doctor_z_4">
		<a href="#" class="fa">талон 10</a>
		<div class="block" style="display: none;">
			<div class="zap_tal_1">
				Время 10</div>
		</div>
	</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript