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

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

Форум программистов > JavaScript: для новичков > Несколько стилей для одной страницы

Автор: OlgaMarius 1.8.2010, 19:49

Здравствуйте! Помогите пожалуйста решить проблему.

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

Код


<div class="tip$CID$">

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

Код


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

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

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

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

P.S. На странице можно использовать условные операторы if else endif (если это может помочь).

Автор: ZneP 1.8.2010, 20:20

Может по клику сделать вызов 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>

Автор: OlgaMarius 2.8.2010, 01:04

ZneP нет. Вот что мне нужно:

user posted image

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

Автор: EmilRegis 2.8.2010, 05:39

зачем вам стили подгружать?
скрывайте элементы динамически как вам выше написали, тока в дивы с классами оборачивайте нужные вам элементы

Автор: ZneP 2.8.2010, 14:49

Код


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

Автор: OlgaMarius 2.8.2010, 14:56

ZneP спасибо! Проблема решена все работает =)