Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Несколько стилей для одной страницы, динамическая смена css 
:(
    Опции темы
OlgaMarius
Дата 1.8.2010, 19:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Здравствуйте! Помогите пожалуйста решить проблему.

Описание ситуации: есть страничка, на которой выводятся личные материалы пользователя. Материалы из разных категорий: "видео", "музыка", "архивы", "закладки" - все вперемешку.
Я могу скрыть ту или иную категорию. 
Просто обернуть шаблон вывода материалов в div, используя переменную категории  $CID$:
Код

<div class="tip$CID$">

Вот, и просто скрывать ту или иную категорию стилями:
Код

 .tip1 {display:none}
 .tip2 {display:none}


Таким образом, теоретически, появляется возможность поставить четыре ссылки или кнопки на этой странице:
link1 = "Мое видео"
link2 = "Моя музыка"
link3 = "Мои архивы"
link4= "Мои закладки"

Проблема: Только теперь, чтобы все это заработало, нужно по клику подгружать файл со стилями для каждой ссылки-рубрики. То есть, если кликнуть по первой ссылке "видео", подгружается файл со стилями где прописано, скрыть три остальные рубрики. и так для каждой ссылки.
(Кстати, сам адрес этой страницы не меняется все происходит на одной странице).

Как это реализовать? Я в  JavaScript не сильна, помогите пожалуйста!

P.S. На странице можно использовать условные операторы if else endif (если это может помочь).
PM MAIL   Вверх
ZneP
Дата 1.8.2010, 20:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 98
Регистрация: 15.7.2008
Где: Россия, Москва

Репутация: нет
Всего: нет
Может по клику сделать вызов javascript-функции с передачей id-категории в качестве параметра, которая будет менять стили для категорий?

Код

<html>

<script>
function HideTips(tip_id)
{
for(i = 1; i < 5; i++)
document.getElementsByClassName('tip' + i)[0].style.display = 'none';

document.getElementsByClassName('tip' + tip_id)[0].style.display = 'block';
}
</script>

<body>
<div class='tip1'><a href='javascript: HideTips(1)'>Мое видео</a></div>
<div class='tip2'><a href='javascript: HideTips(2)'>Моя музыка</a></div>
<div class='tip3'><a href='javascript: HideTips(3)'>...</a></div>
<div class='tip4'><a href='javascript: HideTips(4)'>...</a></div>
</body>

</html>




Это сообщение отредактировал(а) ZneP - 1.8.2010, 20:32
PM MAIL ICQ Skype   Вверх
OlgaMarius
Дата 2.8.2010, 01:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
ZneP нет. Вот что мне нужно:

user posted image

Изначально МЕНЮ не существует.
Можно такое реализовать?


Это сообщение отредактировал(а) OlgaMarius - 2.8.2010, 01:07
PM MAIL   Вверх
EmilRegis
Дата 2.8.2010, 05:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 3
Всего: 4
зачем вам стили подгружать? 
скрывайте элементы динамически как вам выше написали, тока в дивы с классами  оборачивайте нужные вам элементы
PM MAIL   Вверх
ZneP
Дата 2.8.2010, 14:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 98
Регистрация: 15.7.2008
Где: Россия, Москва

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

<html>
<script>
function HideTips(tip_id)
{
for(i = 1; i < 5; i++)
{
  tips = document.getElementsByClassName('tip' + i);
  
  if(i == tip_id)
  {
     for(j = 0; j < tips.length; j++)
       tips[j].style.display = 'block';
  }
  else
  {
    for(j = 0; j < tips.length; j++)
      tips[j].style.display = 'none';
  }
}
}
</script>
<body>
<a href='javascript: HideTips(1)'>Мое видео</a>
<a href='javascript: HideTips(2)'>Моя музыка</a>
<a href='javascript: HideTips(3)'>Архивы</a>

<br><Br>

<div class='tip1'>музыка 1.1</div>
<div class='tip1'>музыка 1.2</div>
<div class='tip3'>видео 3.1</div>
<div class='tip3'>видео 3.2</div>
<div class='tip2'>архив 2.1</div>
<div class='tip2'>архив 2.2</div>
</body>
</html>


Это сообщение отредактировал(а) ZneP - 2.8.2010, 14:51
PM MAIL ICQ Skype   Вверх
OlgaMarius
Дата 2.8.2010, 14:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
ZneP спасибо! Проблема решена все работает =)
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: для новичков | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




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


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

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