Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Два дива (один виден, другой нет)

Автор: Guedda 10.3.2010, 14:36

Добрый всем день. Проблема такая. Как-то на непомнюкаком сайте я видел возможность переключаться между дивами без перезагрузки страницы. Объясню подробнее.
Есть один блок (который виден) с каким-то контентом. При нажатии на кнопку в этом же месте показывается другой блок с другим контентом, а этот исчезает.
Как это можно реализовать?

Заранее благодарен за ответы.

Автор: bars80080 10.3.2010, 15:30

несколько слоёв с разным контентом. один имеет display: block; остальные display: none;
нажатие на кнопку приводит к скрытию одного и открытию другого, путём изменения el.style.display

Автор: Guedda 10.3.2010, 15:35

А немного подробнее? smile

Просто в блочной верстке не очень соображаю.

Автор: HARDMID 10.3.2010, 17:42

Держи один из вариантов ответа: http://dimox.name/universal-jquery-tabs-script/

Есть еще вариант: http://jqueryui.com/download

Автор: bars80080 10.3.2010, 17:52

Код


<a href="javascript:void(0);" onclick="shp('text1');">text1</a>
<a href="javascript:void(0);" onclick="shp('text2');">text2</a>
<a href="javascript:void(0);" onclick="shp('text3');">text3</a>
<a href="javascript:void(0);" onclick="shp('text4');">text4</a>

<div id="content">
<div id="text1">content 1</div>
<div id="text2">content 1</div>
<div id="text3">content 1</div>
<div id="text4">content 1</div>
</div>

Код


function shp(tid) {
    var bk = document.getElementById('content').getElementsByTagName('div');
    var len = bk.length;
    for(var i = 0; i < len; i++) {
        if(bk[i].id == tid) { bk[i].style.display = 'block'; }
        else { bk[i].style.display = 'none'; }
    }
    
}

это общий принцип. конечно, из-за вложенных дивов лучше придумать чуток другой механизм. самое оптимальное, просто перебирать элементы по id.
второе, надо будет так же перебрать и ссылки, чтобы назначить нужной класс .selected, а у остальных его убрать. тогда ссылка можно будет выделить и представить в виде закладки.
ну, и третье, конечно нужно позаботиться, чтобы и в начале был открыт всего один блок, и отмечена всего одна ссылка

Автор: ksnk 10.3.2010, 18:19

Код


<script type="text/javascript">
function shp(tid) {
    document.getElementById('content').className=tid;
}
</script>
<style>
#content #text1,#content #text2,#content #text3,#content #text4 {display:none;}
#content.text1 #text1 {display:block;}
#content.text2 #text2 {display:block;}
#content.text3 #text3 {display:block;}
#content.text4 #text4 {display:block;}
</style>

<a href="javascript:void(0);" onclick="shp('text1');">text1</a>
<a href="javascript:void(0);" onclick="shp('text2');">text2</a>
<a href="javascript:void(0);" onclick="shp('text3');">text3</a>
<a href="javascript:void(0);" onclick="shp('text4');">text4</a>
<div id="content" class="text1">
<div id="text1">content 1</div>
<div id="text2">content 2</div>
<div id="text3">content 3</div>
<div id="text4">content 4</div>
</div>

и я свои 2 копейки вставлю ;)

Автор: Guedda 10.3.2010, 18:24

bars80080, спасибо тебе, плюс поставил. Но есть вопрос. А если дивов в 'content' много, а свойство мне нужно для двоих только менять? Имена им 'poll-content' и 'rating-content'. Как переделать твой JS для именно их?
Пожалуйста, помогите.

Добавлено @ 18:27
Там просто получается приблизительно такой код:

Код


<div id="content">
<div id="poll-content">
  <div>Соntent 1</div><!-- Здесь может быть не один, а сразу несколько div-ов -->
</div>
<div id="rating-content">
  <div>Соntent 2</div><!-- Здесь может быть не один, а сразу несколько div-ов -->
</div>
</div>

И получается, что вообще не видно ни одного блока.

Автор: bars80080 10.3.2010, 18:55

вообще, способ ksnk должен решать задачу более универсально и эффективно

кстати, говоря о вложенных дивах, я подразумевал именно манипуляцию с классами
попробуй его вариант

Автор: SelenIT 11.3.2010, 03:41

ksnk, а почему ссылки глушатся через href="javascript:void(0);" вместо общепринятых (имхо) href="#" и return !1 в onclick-е? Разве javascript: больше не считается противопоказанным (из-за ломающейся динамики картинок в IE и т.п.)? Что я пропустил в этой теме?

Автор: Guedda 11.3.2010, 09:31

Всем спасибо! Вариант ksnk помог!

Автор: Guedda 11.3.2010, 10:19

ksnk, вопрос остался немного не решенным. Твой код подходит, но при загрузке страницы ни одного блока не видно, и только после нажатия на ссылку какой-либо блок появляется. Возможно ли сделать так, чтобы при загрузке страницы сразу был показан первый блок?
Просто не вдупляю, и не получается у меня..
Вписываю в атрибуты первого блока style="display: block;" но тогда этот блок вообще никуда не исчезает...

Автор: bars80080 11.3.2010, 10:27

Цитата(SelenIT @ 11.3.2010, 02:41

)

а почему ссылки глушатся через href="javascript:void(0);" вместо общепринятых (имхо) href="#" и return !1 в onclick-е?

он скопипастил с меня. а я ни о каких return !1 не слышал.
а вот href="#" меня не радует появляющимся символом # в адресе.
а javascript:void(0); пишу потому что где-то когда-то было рекомендовано, и вроде никаких нареканий не вызывало

Цитата(Guedda @ 11.3.2010, 09:19

)

Твой код подходит, но при загрузке страницы ни одного блока не видно, и только после нажатия на ссылку какой-либо блок появляется. Возможно ли сделать так, чтобы при загрузке страницы сразу был показан первый блок?

пример ksnk как раз работает как надо. по умолчанию открыт первый блок. это у тебя что-то в твоём примере не доведено.
показывай код, посмотрим

Автор: SelenIT 11.3.2010, 10:31

Guedda, по логике, в варианте ksnk как раз должен по дефолту рисоваться первый блок - за счет class="text1" у контейнера. А самим блокам никакого style не нужно, иначе наследование стилей перезатрется.

Добавлено через 6 минут и 27 секунд
bars80080, onclick="doSomething();return false" (!1 - тот же false, чтоб меньше писать;) как раз гарантирует неизменность адресной строки независимо от href ссылки. А "решетка" в адресе при отключенном JS - имхо, всё же меньшее зло, чем смерть анимаций и динамических эффектов с картинками в IE (правда, http://forum.vingrad.ru/forum/topic-178421.html на немного другой синтаксис, но я на всякий случай взял за правило использовать javascript:-ссылки только в букмарклетах и для генерации контента).

Автор: ksnk 11.3.2010, 11:23

Цитата(SelenIT @ 11.3.2010, 03:41

)

ksnk, а почему ссылки глушатся через href="javascript:void(0);"

Ну я ленив и копирую кусочки уже отпощенного кода smile

. Да, согласен, решетки - они значительно кошернее... Мне, в общем-то хотелось продемонстрировать еще один прием реализации табов.

У этого приема есть несколько существенных минусов. Если появится желание поправить классами сам div#content, к примеру, для дополнительной стильной раскраски, придется обломаться, так как классы у меня перетираются, и такое поведение, к сожалению, принципиально ;) . Если приспичит делать какой-либо анимированно эффектное появление табов, тоже придеться кусать локти и переписывать скрипт.

Еще один минус "javascript:void(0);", кроме демонстрации бага IE, в том, что центральная кнопка мыши открывает невразумительно пустую страницу вместо чего-то содержательного.

Автор: Guedda 11.3.2010, 11:27

Показываю код:

Код


    <script type="text/javascript">
    function shp(tid) {
     document.getElementById('mcontent').className=tid;
    }
    </script>
    <style>
        #mcontent #opr,#mcontent #rat {display:none;}
        #mcontent.opr #opr {display:block;}
        #mcontent.rat #rat {display:block;}
    </style>

<tr>
<td>
  <div style="text-align: right; margin: 0; padding: 0; border-bottom: 2px #000 solid;">
    <a href="#" onclick="shp('opr');">Ссылка 1</a>
    <a href="#" onclick="shp('rat');">Ссылка 2</a>
  </div>
</td>
</tr>
<tr>
<td class="l2l">
  <div id="mcontent">
    <div id="opr">
      Текст 1
    </div>
    <div id="rat">
      Текст 2
    </div>
  </div>
</td>
</tr>

Вроде все так.

Автор: SelenIT 11.3.2010, 11:38

Guedda, в 22-й строчке надо <div id="mcontent" class="opr">.

Автор: Guedda 11.3.2010, 12:21

Спасибо. Не заметил. Все получилось.

Автор: bars80080 11.3.2010, 15:58

Цитата(ksnk @ 11.3.2010, 10:23

)

что центральная кнопка мыши открывает невразумительно пустую страницу вместо чего-то содержательного.

центральной кнопки?
ух ты

Автор: HARDMID 12.3.2010, 17:05

йэх... юзаю уже много-много-много-много секунд библиотеку http://www.google.ru/search?hl=ru&q=jquery-1.3.2.js+download&sourceid=navclient-ff&rlz=1B3GGGL_ruRU318RU318&ie=UTF-8&aq=0&oq=jquery-1.3.2.js.

+код скриптика в хтмл:

Код


<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function(){
      $(this).parent().children('div.splCont').toggle('normal');
      return false;
    });
  });
</script>

В CSS примерно так все, остальное - по желанию:

Код


.splCont{display:none;border-left: 1px solid #cccccc;border-right: 1px solid #cccccc;padding:3px 5px;font-size: 1em;}
.splLink { font-size: .8em; }

в хтмл:

Код


<div class="spoiler">
<!-- 1 -->
<a class="splLink" href="javscript://">заголовок раскрывающегося дива</a>
<noscript>
<p>текст, который покажется при отключенных скриптах</p>
</noscript>
<div class="splCont">
<p>Какой-нибудь нужный текст</p>
</div>
</div>

<!-- и следующий: -->

<div class="spoiler">
<!-- 1 -->
<a class="splLink" href="javscript://">заголовок раскрывающегося дива</a>
<noscript>
<p>текст, который покажется при отключенных скриптах</p>
</noscript>
<div class="splCont">
<p>Какой-нибудь нужный текст</p>
</div>
</div>

<!-- и т.п... таких блоков мона клепать скока угодно. А пошустрить CSS, так можно сделать и поинтереснее. -->

Единственное, чего не требовалось при решении задачи, так это схлопывание одного дива при открытии другого. Если кто чуть доработает для "авто-схлопывания" соседнего дива, будет круто. )))

Автор: Violator 12.3.2010, 18:55

HARDMID,

Код


<script type="text/javascript">
  $(document).ready(function(){
    $('.splLink').click(function() {
      cont = $(this).parent().children('.splCont');
      $('.splCont').each(function() {
        if ($(this)[0] != cont[0] && $(this).hasClass('show'))
          $(this).hide('normal', function() { $(this).removeClass('show'); });
      });
      if (cont.hasClass('show'))
        cont.hide('normal', function() { $(this).removeClass('show'); });
      else
        cont.show('normal', function() { $(this).addClass('show'); });
      return false;
    });
  });
</script>

Автор: HARDMID 15.3.2010, 14:26

Спасибо, то что надо! ))) отличненько работает. )))