Модераторы: Illuminaty

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Два дива (один виден, другой нет), Возможность переключать их 
V
    Опции темы
Guedda
Дата 10.3.2010, 14:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Подрывник
****


Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78



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

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


--------------------
Ll 2
PM MAIL WWW ICQ Skype GTalk   Вверх
bars80080
Дата 10.3.2010, 15:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



несколько слоёв с разным контентом. один имеет display: block; остальные display: none;
нажатие на кнопку приводит к скрытию одного и открытию другого, путём изменения el.style.display
PM MAIL WWW   Вверх
Guedda
Дата 10.3.2010, 15:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Подрывник
****


Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78



А немного подробнее?  smile 
Просто в блочной верстке не очень соображаю.


--------------------
Ll 2
PM MAIL WWW ICQ Skype GTalk   Вверх
HARDMID
Дата 10.3.2010, 17:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 47
Регистрация: 10.12.2007

Репутация: нет
Всего: нет



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

Есть еще вариант: http://jqueryui.com/download
PM   Вверх
bars80080
Дата 10.3.2010, 17:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Код

<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, а у остальных его убрать. тогда ссылка можно будет выделить и представить в виде закладки.
ну, и третье, конечно нужно позаботиться, чтобы и в начале был открыт всего один блок, и отмечена всего одна ссылка
PM MAIL WWW   Вверх
ksnk
Дата 10.3.2010, 18:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Код

<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 копейки вставлю ;)


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Guedda
Дата 10.3.2010, 18:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Подрывник
****


Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78



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>

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


Это сообщение отредактировал(а) Guedda - 10.3.2010, 18:28


--------------------
Ll 2
PM MAIL WWW ICQ Skype GTalk   Вверх
bars80080
Дата 10.3.2010, 18:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



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

кстати, говоря о вложенных дивах, я подразумевал именно манипуляцию с классами
попробуй его вариант
PM MAIL WWW   Вверх
SelenIT
Дата 11.3.2010, 03:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



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


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Guedda
Дата 11.3.2010, 09:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Подрывник
****


Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78



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


--------------------
Ll 2
PM MAIL WWW ICQ Skype GTalk   Вверх
Guedda
Дата 11.3.2010, 10:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Подрывник
****


Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78



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


--------------------
Ll 2
PM MAIL WWW ICQ Skype GTalk   Вверх
bars80080
Дата 11.3.2010, 10:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Цитата(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 как раз работает как надо. по умолчанию открыт первый блок. это у тебя что-то в твоём примере не доведено.
показывай код, посмотрим
PM MAIL WWW   Вверх
SelenIT
Дата 11.3.2010, 10:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



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

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


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
ksnk
Дата 11.3.2010, 11:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Цитата(SelenIT @  11.3.2010,  03:41 Найти цитируемый пост)
ksnk, а почему ссылки глушатся через href="javascript:void(0);"

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

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

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


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
Guedda
Дата 11.3.2010, 11:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Подрывник
****


Профиль
Группа: Завсегдатай
Сообщений: 3137
Регистрация: 27.12.2005
Где: Ростов-на-Дону

Репутация: 3
Всего: 78



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

    <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>

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

Это сообщение отредактировал(а) Guedda - 11.3.2010, 11:31


--------------------
Ll 2
PM MAIL WWW ICQ Skype GTalk   Вверх
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.1010 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.