Смена текстового содержимого блока по клику

Тема в разделе "JavaScript", создана пользователем Melnik_DS, 16 май 2012.

Модераторы: ZiX
  1. Melnik_DS

    Melnik_DS Создатель

    Регистр.:
    16 ноя 2011
    Сообщения:
    16
    Симпатии:
    0
    Нужно в одном блоке с фиксированным размеров вывести содержимое нескольких div-ов только поочередно при клике по ссылке. Приложу код:
    Код:
    <div class="target-site">sitename.ru</div>
    <a class="target-link" href="#"><span></span>Cледующий пример</a>
    <div class="list-wrapper">
    <ul class="list next">
        <li><a href="#"><span>Слово запроса</span><em>1ое место</em></a></li>
    <li><a href="#"><span>Слово запроса</span><em>2ое место</em></a></li>
    </ul>
    </div>
     
    <div class="list-wrapper2">
    <ul class="list next">
        <li><a href="#"><span>Слово запроса</span><em>1ое место</em></a></li>
    <li><a href="#"><span>Слово запроса</span><em>2ое место</em></a></li>
    </ul>
    </div>
     
    <div class="list-wrapper3">
    <ul class="list next">
        <li><a href="#"><span>Слово запроса</span><em>1ое место</em></a></li>
    <li><a href="#"><span>Слово запроса</span><em>2ое место</em></a></li>
    </ul>
    </div>
     
    Т.е по клику на ссылку <a class="target-link" href="#"><span></span>Cледующий пример</a> сменяется отображение в блоке с list-wrapper на list-wrapper2, потом при следующем клике на list-wrapper3 и так по кругу, т.е должен быть цикл. Подскажите как это можно реализовать на Jquary или java-script?
     
  2. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
  3. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    ну где-то так...
    PHP:
    <div class="target-site">sitename.ru</div>
    <
    class="target-link" href="#"><span></span>Cледующий пример</a>
    <
    div id="list-wrapper1" style="display:none">
    <
    ul class="list next">
        <
    li><a href="#"><span>Слово запроса</span><em>1ое место</em></a></li>
    <
    li><a href="#"><span>Слово запроса</span><em>2ое место</em></a></li>
    </
    ul>
    </
    div>
     
    <
    div id="list-wrapper2" style="display:none">
    <
    ul class="list next">
        <
    li><a href="#"><span>Слово запроса</span><em>3ое место</em></a></li>
    <
    li><a href="#"><span>Слово запроса</span><em>4ое место</em></a></li>
    </
    ul>
    </
    div>
     
    <
    div id="list-wrapper3" style="display:none">
    <
    ul class="list next">
        <
    li><a href="#"><span>Слово запроса</span><em>5ое место</em></a></li>
    <
    li><a href="#"><span>Слово запроса</span><em>6ое место</em></a></li>
    </
    ul>
    </
    div>
    PHP:
    $('.target-link').toggle(function(){$('#list-wrapper3').hide(); 
                                       $(
    '#list-wrapper1').show();},
                            function(){$(
    '#list-wrapper1').hide(); 
                                       $(
    '#list-wrapper2').show();},
                            function(){$(
    '#list-wrapper2').hide(); 
                                       $(
    '#list-wrapper3').show();});