JQuery Slide «To»

Question

Хорошо,

У меня есть список ссылок справа, где каждая ссылка соответствует их собственному div. Дивы «сложены» друг над другом. В основном у меня возникли проблемы с попыткой понять, могу ли я щелкнуть ссылку «4», чтобы сделать ее сползающей вниз до div 4. И когда вы нажимаете «link 1», как заставить ее сдвигаться до div 1. Я предполагаю, что я не может понять, как сделать слайд Div вверх и вниз на основе какой ссылки вы нажимаете (если это можно сделать даже).

HTML

<div id="slider"> 
    <div class="one"> </div> 
    <!--end slide--> 
    <div class="two"> </div> 
    <!--end slide--> 
    <div class="three"> </div> 
    <!--end slide--> 
    <div class="four"> </div> 
    <!--end slide--> 
</div> 
<!-- end slider --> 
<div id="clicker"> 
    <a href="#" id="link-one">DLO</a> 
    <a href="#" id="link-two">test-a</a> 
    <a href="#" id="link-three">tes-a</a> 
    <a href="#" id="link-four">te-a</a> 
</div> 

Answer 1

Если я правильно понял ваш вопрос, вы должны искать в функции дописывания(). Этот код ниже работает с jQuery 1.4.3. Я добавил некоторые встроенные стили только для того, чтобы выделить div на моей странице.

<div id="slider"> 
    <div class="one" style="width:200px;height:20px;background-color:gray;"> </div> 
    <!--end slide--> 
    <div class="two" style="width:200px;height:20px;background-color:white;"> </div> 
    <!--end slide--> 
    <div class="three" style="width:200px;height:20px;background-color:lime;"> </div> 
    <!--end slide--> 
    <div class="four" style="width:200px;height:20px;background-color:silver;"> </div> 
    <!--end slide--> 
</div> 
<!-- end slider --> 
<div id="clicker"> 
    <a href="#" id="link-one" onclick="$('.one').append(this)">DLO</a> 
    <a href="#" id="link-two" onclick="$('.two').append(this)">test-a</a> 
    <a href="#" id="link-three" onclick="$('.three').append(this)">tes-a</a> 
    <a href="#" id="link-four" onclick="$('.four').append(this)">te-a</a> 
</div> 

Если вы хотите, чтобы придать ему немного прохладной «замирание в» эффект, который вы можете скрыть якорный текст, а затем добавить его в DIV, а затем исчезают его. Выглядит немного прохладнее.

<div id="slider"> 
    <div class="one" style="width:200px;height:20px;background-color:gray;"> </div> 
    <!--end slide--> 
    <div class="two" style="width:200px;height:20px;background-color:white;"> </div> 
    <!--end slide--> 
    <div class="three" style="width:200px;height:20px;background-color:lime;"> </div> 
    <!--end slide--> 
    <div class="four" style="width:200px;height:20px;background-color:silver;"> </div> 
    <!--end slide--> 
</div> 
<!-- end slider --> 
<div id="clicker"> 
    <a href="#" id="link-one" onclick="$(this).hide();$('.one').append(this);$(this).fadeIn();">DLO</a> 
    <a href="#" id="link-two" onclick="$(this).hide();$('.two').append(this);$(this).fadeIn();">test-a</a> 
    <a href="#" id="link-three" onclick="$(this).hide();$('.three').append(this);$(this).fadeIn();">tes-a</a> 
    <a href="#" id="link-four" onclick="$(this).hide();$('.four').append(this);$(this).fadeIn();">te-a</a> 
</div>