<a id="link_1" href="#"> Ссылка1 </a>
<a id="link_2" href="#"> Ссылка2 </a>
<span id="span_1"> </span>
<span id="span_2"> </span>
При нажатии на первую ссылку, должен появляться первый спан, и исчезать второй (если виден). При повторном нажатии первый спан исчезает. То же самое со второй ссылкой.
Делаю так:
$('#link_1').toggle(
function() {
$('#span_1').slideDown();
if ($('#span_2').is(':visible')) {$('#span_2').slideUp();}
},
function() {
$('#span_1').slideUp();
});
$('#link_2').toggle(
function() {
$('#span_2').slideDown();
if ($('#span_1').is(':visible')) {$('#span_1').slideUp();}
},
function() {
$('#span_2').slideUp();
});
Но получается вот что: если второй спан развернут, то по первой ссылке нужно щелкнуть 2 раза чтоб его свернуть и развернуть первый спан, ну и соответственно в обратную сторону (с первым спаном и второй ссылкой такая же история...). Подскажите пжл почему ?
Спустя 2 часа, 47 минут, 24 секунды (26.07.2011 - 01:07) moskitos80 написал(а):
Можно обойтись и без toggle.
Держи. Я примерно так делаю вкладки :
Держи. Я примерно так делаю вкладки :
<script type="text/javascript">
$(function(){
$("span.tab:not('.start')").hide();
$("a[href^=#tab]").click(
function(){
$("span.tab:visible").slideUp(400);
$("span" + $(this).attr("href")).slideDown(400);
})
})
</script>
<style type="text/css">
span{
border:solid 1px #0000CC;
width:300px;
display:block;
}
</style>
<a id="link_1" href="#tab1"> Ссылка1 </a>
<a id="link_2" href="#tab2"> Ссылка2 </a>
<span id="tab1" class="tab start">
<p>
<strong>SPAN1</strong>
Cras consectetur risus eu nulla fringilla a cursus lorem ullamcorper.
Vestibulum semper malesuada libero ac ullamcorper.
Suspendisse sed tempus est. Mauris nunc arcu, tristique sit amet
cursus nec, vestibulum sit amet libero.
</p>
</span>
<span id="tab2" class="tab">
<p>
<strong>SPAN2</strong>
Cras consectetur risus eu nulla fringilla a cursus lorem ullamcorper.
Vestibulum semper malesuada libero ac ullamcorper.
Suspendisse sed tempus est. Mauris nunc arcu, tristique
sit amet cursus nec, vestibulum sit amet libero.
</p>
</span>