HTML+CSS+JavaScript

Есть сайт, на который пользователи могут добавлять контент четырех видов.
1. видео
2. музыка
3. архивы
4. закладки

Каждый тип контента добавляется в свою категорию. Каждая категория имеет уникальный ID.
На данный момент, пользователь имеет доступ:
1. либо к общим категориям, скажем - "видео" где собраны материалы всех пользователей без какой-либо сортировки.
2. либо к странице "мои материалы", где материалы только его, но они идут вперемешку музыка с закладками, видео и архивами..
Задача - организовать личное меню, чтобы пользователь имел доступ только к своему контенту, типа - моя музыка, мое видео и т.д..
========
Категории имеют ID: tip1, tip2, tip3, tip4
За ID отвечает переменная $CID$
Идея: шаблон вывода материалов, обернуть дивом <div class="tip$CID$">
и затем скрывать те или иные категории.
.tip1 {display:none}
именно на странице личных материалов, где они идут вперемешку.

В конечном итоге, нужны четыре ссылки - "видео", "музыка", "архивы" и "закладки". Чтобы после нажатия на ссылку, три другие категории скрывались.
.tip1 {display:none}
.tip2 {display:none}
.tip3 {display:none}

Помогите пожалуйста с этим разобраться! Не могу понять, как это можно реализовать?

Если скрывать и разрешать только личное, то это нужно делать на сервере, а не у клиента.

К сожалению, нет доступа в CMS.
Как я это вижу, можно решить задачу так - при нажатии на ссылку, подгружать файл со стилями (где прописать какие категории display:none), и так для каждой ссылки. Выходит нужно подгружать 4 файла со стилями. Это будет своего рода сортировка материалов.
Но как их можно подгрузить, чтобы стили применялись на этой же странице?
Задача выходит такова - есть страница с 4-мя ссылками. Нужно чтобы после нажатия на ссылку link1 подгружался (и применялся) style1 и т.д. (А может быть стили внедрить на страницу а не в отдельные файлы)...
Можно ли это реализовать? Каак? Помогите пожалуйста, кто разбирается, я в JavaScript не сильна.

Вы ответьте на ЕДИНСТВЕННЫЙ вопрос - адресная строка в браузере после нажатия на одну из четырёх ссылок изменяется?

АЯ - нет не меняется, иначе не было бы этой проблемы.
------------
На странице можно использовать условные операторы (если это может помочь) if else endif. Поддерживаются вложенные.

Хе-хе, как раз наоборот - если "не меняется", то, значит, Вы остаётесь в пределах ТЕКУЩЕГО документа, что значительно упрощает всё дело.

Если бы "менялась", что означало бы загрузку ДРУГОГО документа в окно, тогда Вам надо было бы решать задачу передачи данных от одного документа к другому, что (в Вашем случае, когда Вы не имеете доступа к серверу), возможно только через куки.

А так - не вижу вообще никаких проблем

<div id="mDV"> <a href="#" onclick="mFUNC (this); return false">Link1</a> <a href="#" onclick="mFUNC (this); return false">Link2</a> <a href="#" onclick="mFUNC (this); return false">Link3</a> <a href="#" onclick="mFUNC (this); return false">Link4</a> </div> <script> function mFUNC (x) { for (var j = 0, obj = document.getElementById ('mDV').getElementsByTagName ('A'); j < obj.length; j++) if (obj [j] != x) obj[j].style.display = 'none'; //ну а здесь делаете то, что Вам и надо делать по нажатию на ссылку } </script>

Ох, АЯ большое спасибо! Я уже голову сломала пытаясь решить эту задачу, а оказывается все просто (не для меня) :).

>нет не меняется, иначе не было бы этой проблемы.

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

Это то, что делает скрипт АЯ? Скрывает ссылку?
Мне нужно наоборот скрыть не ссылку а сами категории.
Попробую объяснить еще раз.
У меня 4 категории, и страница, которая выводит все материалы пользователя не учитывая эти категории. То есть видео, музыка, закладки и архивы выводятся по дате добавления, со всех категорий, на эту одну страницу.

Я хочу разместить на этой странице четыре ссылки-кнопки. По клику, хочу скрывать лишние категории. Скрывать их не проблема вообще. Но вот по нажатию на ссылку - это уже проблема для меня. Скажем, кликнул человек на ссылку "мое видео", и скрылись три лишние категории. Кликнул на ссылку "мои архивы" скрылись три остальные и т.д. Наверное, нужно после клика на ссылке где-то сохранить данные о том какая ссылка была кликнута и перегружать страницу с соответствующим стилем. Но я не разбираюсь в скриптах...

Вот как мне этого добиться? Реально ли это вообще ?
----
Если бы адрес менялся в зависимости от категории, то я бы просто вставила стили для каждого адреса. Грубо говоря - эта страница выводит только видео, та - только архивы. Какие могли бы быть проблемы? Но в моем случае именно в том и проблема, что адрес один, а стилей 4!
----
Может я чего-то и не понимаю. Я начинающий дизайнер и не программист.

>"Я начинающий дизайнер и не программист."

Дело не в том - кто Вы именно.
Дело в том, что, хоть я и дал Вам как бы "решение проблемы", однако я не понимаю сути того, чего Вам надо.

Было у вас 4 ссылки.
Юзер кликнул по одной из них - остальные три ссылки со страницы исчезли: это полностью обеспечивается тем скриптом, что я Вам дал.

Теперь идём дальше.
На странице остается одна ссылка, по которой кликнули.
И что эта ссылка ТЕПЕРЬ (оставшись одна) будет делать, если по ней кликнуть ещё раз?
Ничего?
Так нафига тогда "козе баян"?

Мей би, вместо ссылки надо просто прописать наименование раздела в котором юзер находится?
Т. е. то же "Видео", но не в виде ссылки, а виде просто надписи?

АЯ ну не сердитесь Вы.

Вот что мне нужно сделать:
Картинка
http://img12.imageshost.ru/img/2010/08/01/image_4c55a8c6d0e73.jpg

АЯ как думаете так заработает?

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

<html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <style> #iMen      {text-align: center; float: left; padding: 5px 0; width: 120px; border: 1px solid black; font-weight: bold} #iMen li   {list-style-type: none; margin-bottom: 5px} #iMen li a {color: black} #iCnt      {float: left; margin-left: 40px} div.cCnt   {padding: 10px; width: 200px; margin-bottom: 20px; border: 1px solid black; font-weight: bold} </style> <script> function mFunc (x) { if (self.gOBJ) with (gOBJ.style) {color = 'black'; fontVariant = 'normal'} gOBJ = x; with (gOBJ.style) {color = 'red'; fontVariant = 'small-caps'} for (var j = 0, t = x.id.substr (1), obj = document.getElementById ('iCnt').getElementsByTagName ('div'), lj = obj.length; j < lj; j++) obj [j].style.display = (obj [j].className.indexOf (t) > 0) ? '' : 'none'; } </script> </head> <body> <ul id="iMen"> Меню<hr noshade color="black" size="0"> <li><a href="#" id="iArc" onclick="mFunc (this); return false">мои архивы</a> <li><a href="#" id="iMus" onclick="mFunc (this); return false">моя музыка</a> <li><a href="#" id="iVid" onclick="mFunc (this); return false">мое видео</a> <li><a href="#" id="iBkm" onclick="mFunc (this); return false">мои закладки</a> </ul> <div id="iCnt">    <div class="cCnt cMus">музыка 1</div>    <div class="cCnt cMus">музыка 2</div>    <div class="cCnt cVid">видео 1</div>    <div class="cCnt cArc">архив 1</div>    <div class="cCnt cMus">музыка 3</div>    <div class="cCnt cArc">архив 2</div>    <div class="cCnt cBkm">закладка 1</div> </div> </body> </html>

Ничего себе АЯ! Спасибо огромное, сейчас попробую встроить скрипт на страницу.

>Задача - организовать личное меню, чтобы пользователь имел доступ только к своему контенту, типа - моя музыка, мое видео

Вы уж разделите термины "запретить" и, например, "показать из...". Из вашей задачи вытекает примерно такое понимание:
Есть категории А, В, С, D, E, F, и я как пользователь N имею право доступа только к категориям D, E, F. Если это так, то ни под каким предлогом, не в скрытом, а тем более явном виде, ссылок на категории А и В на страницах не должно быть. Мне, как "нехорошому" пользователю, ничего не стоит просмотреть исходный код страницы, получить "скрытые" ссылки на запрещенные для меня категории, и получить к ним доступ. Запретить можно только на сервере, определяя пользователя, и выдавая ему только доступное для него.

Возможно речь идет об организации представления категорий, где есть для общего пользования, а есть личное (избранное), наподобие организации папок в Widows, где есть папка Мои документы. Но при этом система не запрещает мне доступа и к другим папкам. Но тогда это просто меню раскрывающееся, и действительно, зачем что-то прятать тогда?

Может вас АЯ и понимает, а я тоже не понимаю, как и вы - чего вы хотите. :)

sim5, почему же мне так трудно объяснить такую простую вещь? :D Я точно понимаю чего хочу.

Мне нужно "показать из". Запрещать не нужно.

Дело в том, что на странице материалов пользователя, выводятся материалы его авторства только вот из разных категорий в произвольном порядке.
Вот представьте вы зарегистрировались на сайте, добавили материалы в разные категории и хотите получить к ним доступ. Вы кликаете на ссылку "мои материалы" и видите список ВСЕХ своих материалов отсортированные по дате добавления. Вот примерно так:

видео 1
видео2
архив1
музыка1
музыка2
видео1
видео3
архив2
архив3
видео4

и т.д.

Все это на одной странице - "мои материалы"

Я хочу добавить ссылки-кнопки, чтобы отобразить
"только видео"
"только архивы"
"только музыку"
"только закладки"

на этой же самой странице.

Можно так сделать?

Значит вами не верно описана задача - "чтобы пользователь имел доступ только к своему контенту". Иметь только к..., значит запретить к остальному.

sim5, похоже на то, сорри.
----
Пыталась установить скрипт, но не получается из-за того, что у меня есть еще дивы, которые мешают. А убрать я их никак не могу:

<div id="iCnt">  <div id="allEntries"> <div id="entryID9"> <div class="tip3">  первый материал из категории3 </div> </div> <div id="entryID8"> <div class="tip3">  второй материал из категории 3 </div> </div> </div>  </div>

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

В каком смысле мешают? Скриптом от АЯ они скрываются. А вам как надо?
А такой вопрос - вы говорите, что вам не доступна CMS, так как же вы правите меню? Кстати, это сложно назвать меню, ужасно неудобно и громоздко (я пощелкал :)) Если сделать меню с действительно выбором категорий, то и заморочки бы этой у вас не было, да и компактно бы было.

sim5, каким-то образом мешают (скрывалось все, даже то, что скрывать не следовало). Я обернула материалы тегом <b></b>и все прекрасно заработало. Все так как и хотелось. АЯ еще раз огромное спасибо!

Ну знаете, sim5, если все делать идеально и не ставили бы ограничений, то никто бы ничего так и не сделал до конца :).Всегда можно сделать лучше. А вообще, это же только скрипт АЯ написал, задам стили и будет симпатично. А почему громоздко? Одно маленькое меню из четырех ссылок...

P.S. Я могу редактировать и править все кроме PHP кода и баз данных CMS. А именно это и нужно, чтобы создать возможность сортировать материалы и по автору и по категории одновременно.

Извиняюсь, но нафиг нужно такое CMS? Вы же должны наполнять контентом страницы и формировать на его основе меню описывающие категории и их вложенность. А у вас как получается - выплюнула вам база данных все что там есть и как бог на душу положил, а вы уж там сами разбирайтесь, не царское это дело серверу во всей этой фигне разбираться? Так что-ли? :)
Что это за CMS, которая шаблона меню человеческого не может предложить, и которое бы вы не могли наполнить?
Меню у вас одно и маленькое, но ужасно неуклюжее, громоздкое даже не смотря на свои размеры маленькие. Впрочем, если вы считате, что это нормально, зачем же с вами спорить. )

PS. А скрипт АЯ без всяких тегов параграфа скрывает "мешающее вам", впрочем, что значит мешает я то не знаю. :) Ваша CMS случайно не использует jQuery?

sim5, :) так получилось из-за моего стремления экономить модули CMS (вот на что есть ограничения). Этим скриптом АЯ сэкономил мне 3 модуля =).

Меню сайта, тем что Вы видели не ограничивается =). Вот что я хочу видеть на сайте (многое уже есть):

МОДУЛИ ДЛЯ ОБЩЕНИЯ
Форум
Чат
Личная переписка
Группы по интересам
Вопрос-ответ (не ЧаВо, а нечто похожее на вопрос-ответ на mail.ru или google)
Доска объявлений
Анкета + Друзья (контакты)
Гостевая (личная в профиле пользователя)

КОНТЕНТ МОДУЛИ (ЛИЧНЫЕ)
Блоги
Фотоальбомы
Закладки
Видео
Музыка
Архивы

КОНТЕНТ МОДУЛИ (ОБЩИЕ)
Новости
Статьи
База данных по моей теме
Уроки по моей теме
Гостевая
ЧаВо

И многое-многое другое! =)
(так что буду еще обращаться сюда за помощью =))


В принципе, все работает прекрасно безо всяких скриптов, все автоматизировано и очень удобно, меню и разделы сайта работают прекрасно и так далее. Но... модулей мне не хватает =), и я несколько модулей, делаю на основе одного. Скажем - "видео" "архивы" и "закладки" на основе одного модуля, "закладки" хотя в СМS есть отдельный модуль для каждого вида контента.
И вот тут появляются уже проблемы. А именно та проблема что я описала в этой теме:
как разделить (отсортировать) контент пользователя по категориям на странице его материалов в рамках одного раздела (если CMS рассчитывает на то, что тут одни закладки а у меня - всего понемногу =)).
Кстати говоря, есть еще меню (но не личное)

файлы:
- закладки
- видео
- музыка
- архивы

то есть самое обычное меню навигации (это только по разделу "файлы"), проблема лишь в том, что оно не личное.

А что касается чем мешают дивы в скрипте это лучше спросить у АЯ. Как я поняла, нужно иметь дивов с ID ровно столько сколько имеется материалов, а у меня их больше (они вложенные и я не могу их убрать). Но в любом случае уже все работает и пришло ко мне счастье. =)

АЯ может вам и все модули сэкономить ) Зачем экономия, которая приводит к неудобству? Для того чтобы действительно было удобно, нужно писать и добавлять модуль, если вы конечно знаете РНР, который бы и выдавал на страницу необходимое и в удобоваримом представлении.
А вот то, что вы называете меню, то оно все таки странное - смысл закрытия его элементов, если по умолчанию все раскрыто? Почему не идти от логичного, и не показывать необходимые элементы?
Но если вы нашли счастье после экномии, то заради бога. )

Не могу с вами не согласится! По уму для каждого вида контента нужен свой модуль. В будущем думаю заказывать дополнительные модули. Просто пока это не первостепенная задача. Первостепенной задачей стоит вопрос - как из модуля "объявления", сделать модуль "вопросы-ответы" =) Так что приходится идти на вот такие компромиссы...

Замените

obj [j].style.display = (obj [j].className.indexOf (t) > 0) ? '' : 'none';

на

obj [j].style.display = (obj [j].className && obj [j].className.indexOf (t) != -1) ? '' : 'none';

и всё будет работать при любом количестве других div'ов (которые без класса).