Применить css к классам с событиями onclick

Question

У меня есть меню слева от моей страницы, которое состоит из вложенных ULS.Справа от моей страницы у меня есть ряд div контента, у каждого из которых есть класс, соответствующий ссылке меню слева.Когда вы щелкаете ссылку меню слева, необходимо скрыть все мои элементы содержимого, а затем показывать только те, которые имеют соответствующий класс.Поэтому, если вы нажмете ссылку «Реализация / Разработка системы», на странице сначала будут скрыты все элементы div класса «content», а затем показаны все элементы div класса «content5».

В качестве усложнения этого меню есть некоторыеjavascript, прикрепленный к ul, которые показывают и скрывают вложенные меню.Я не хочу трогать или мешать, потому что это работает.Кроме того, я не думаю, что было бы полезно решить мою проблему, потому что он просматривает все меню li, и я не знаю, как связать одно действие пунктов меню с этой общей функцией.

Мне кажется, что мне нужнодобавить событие onclick, которое устанавливает отображение всех моих div'ов с контентом равным none и устанавливает подмножество для блокировки.Меню генерируется на стороне сервера, поэтому я могу добавить к нему атрибуты.

Мой мыслительный процесс - это случай, когда меню ссылается на:

<a href="#" onclick="swap_content(content5)">Implementation/System development</a>

Затем создайте код, который изменяет CSS следующим образом:

swap_content([target]){
    div.content{ display:none;}
    div.[target]{ display:block;}
}

Таким образом, он скрывает весь отображаемый в данный момент контент, а затем отображает только контент, связанный с этой ссылкой.

<div class='content content26 content27 content28 content29 content30'></div>

1. Будет ли использование onclick мешать расширению / свертыванию из jquery?Я думаю, что открытие и закрытие зависит от просмотра класса ul, ul.menu1, ul.menu2 и т. Д., Так как нет событий onclick.
2. Я не могу придумать способ связать ссылку с ее целевым содержимым на стороне сервера, кроме явной передачи ее функции swap_content в onclick.

ЯСовершенно новый для javascript, так что это может быть полностью безумным, но любая помощь или руководство будет оценено.Тестовая страница вверх здесь , если вы хотите посмотреть.В примере div содержимого уже установлены на display:none;.

Код, управляющий открытием и закрытием меню, находится по адресу http://nwi.pdx.edu/jQueryScripts/pubs-search-script.js, но, как я уже сказал, это работает, я действительно не хочу касаться этого слишком сильно.

Answer 1

Сначала установите для свойства отображения элементов div и всего содержимого в них значение «Наследовать».

После этого поместите их все в контейнер, такой как тег span или div, затем в этот span или div добавьте следующееcode:

onclick="style.display = 'none'"

Это будет скрывать все в этом теге, которое наследует от него свойство display.

Update: дать тег, который содержит все элементы div, которые вы хотите скрыть, такие как idas id = "thing".

Ваша функция скрытия должна выглядеть примерно так:

function hide ()
 {
  document.getElementById("thing").style.display = "none";
 }

, затем в html для элемента, который вы хотите щелкнуть, чтобы это произошло, добавьте

onclick="hide()"

Обновление Numerou Dos: Вы можете использовать библиотеку JQuery JavaScript для выбора по классу, выполнив что-то вроде:

$(."hider").click(function(){$(".myClass").css("display","none");});

Где myClass - это имя вашего класса, а hider - это класс того, чем он является.щелчок, чтобы это произошло. Также, если вы сделаете это таким образом (есть пара других способов сделать это с помощью селекторов классов), удалите функцию onclick из вашего hider.