Программирование
6 • Посмотреть все темы

Смена блока при щелчке.

6703

Андрей @ZloVeЩиЙ

23.08.2010

Нужно воплотить в реальность что то подобное этому - https://vmeste.eu/forum?pid=168851#p168851
Но что бы при щелчке на кнопку див не скрывался\открывался, а заменялся другим.
Допустим есть три блока:

<div id=main>
<div id='odin'> CONTENT </div>
<div id='dva'> CONTENT #2 </div>
<div id='tri'> CONTENT #3 </div>
</div>

Ну и под ними три ссылки естественно:

При открытии страницы отображается блок с CONTENT при щелчке по любой из ссылок он заменяется другим блоком с CONTENT #2 или 3, при щелче на первую ссылку возвращаемся назад к блоку с CONTENT...

Отредактировано ZloVeЩиЙ - 22.11.2010

6600

Александр @admiral

23.08.2010

На jquery может вариант подойдет?
1. Вставляем между <head> и </head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
2. Туда же, ниже строкой вставляем этот скрипт (приложил в к сообщению):
<script type="text/javascript" src="content.js"></script>
В котором прописываем:

(function($) {

$(function() {



  $('ul.content').each(function() {

    $(this).find('li').each(function(i) {

      $(this).click(function(){

        $(this).addClass('activ').siblings().removeClass('activ')

          .parents('div.block').find('div.box').hide().end().find('div.box:eq('+i+')').fadeIn(150);

      });

    });

  });



})

})(jQuery)

3. В нужном месте на странице прописываем наш блок:

<div class="block">

  <ul class="content">

    <li class="activ">ОДИН</li>

    <li>ДВА</li>

  </ul>

  <div class="box visible">

  CONTENT

  </div>

  <div class="box">

  CONTENT #2

  </div>

</div>

4. В стили добавляем описание какой блок по умолчанию скрыт, а какой нет:

.box { display: none; }

.box.visible { display: block; }

**********