Как сохранить: активный стиль css после нажатия элемента

Я использую якорь в качестве навигации по сайту.

 

CSS

 #nav { margin-left: 50px; margin-top: 50px; text-transform: uppercase; } .navitem { background: #333; color: white; width: 230px; height: 50px; font-size: 25px; line-height: 50px; padding-left: 20px; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-top: 10px; } .about:hover { background: #cc00ff; } .about:active { background: #ff00ff; color: #000; width: 250px; } .works:hover { background: #0066FF; } .works:active { background: #0099cc; color: #000; width: 250px; } 

Мне интересно, как сохранить стиль элемента div в активном состоянии один раз после щелчка, пока я не нажму на другой элемент навигационной панели, и как это сделать?

Объединение JS & CSS:

 button{ /* 1st state */ } button:hover{ /* hover state */ } button:active{ /* click state */ } button.active{ /* after click state */ } jQuery('button').click(function(){ jQuery(this).toggleClass('active'); }); 

Селектор :target -pseudo сделан для таких ситуаций: http://reference.sitepoint.com/css/pseudoclass-target

Он поддерживается всеми современными браузерами. Чтобы получить некоторые версии IE, чтобы понять это, вы можете использовать что-то вроде Selectivizr

Ниже приведен пример вкладок :target -pseudo selector.

Вы можете использовать немного Javascript для добавления и удаления classов CSS ваших навигационных элементов. Для начала создайте class CSS, который вы собираетесь применить к активному элементу, назовите его: «.activeItem». Затем добавьте функцию javascript для каждого из кнопок навигации onclick, которое добавит class activeItem к активированному и удалит из других …

Он должен выглядеть примерно так: (непроверенный!)

 /*In your stylesheet*/ .activeItem{ background-color:#999; /*make some difference for the active item here */ } /*In your javascript*/ var prevItem = null; function activateItem(t){ if(prevItem != null){ prevItem.className = prevItem.className.replace(/{\b}?activeItem/, ""); } t.className += " activeItem"; prevItem = t; }   

Я ПОНЯЛ. ПРОСТОЙ , ЭФФЕКТИВНЫЙ NO jQUERY

Мы собираемся использовать скрытый флажок.
Этот пример включает в себя один «щелчок мышью», зависающий / активный «состояние»,

Чтобы сделать сам контент кликабельным:

HTML

   

CSS

 #activate-div{display:none} .my-div{background-color:#FFF} #activate-div:checked ~ label .my-div{background-color:#000} 

Чтобы изменить содержание кнопки:

HTML

  
//MY DIV CONTENT

CSS

 #activate-div{display:none} .my-div{background-color:#FFF} #activate-div:checked + .my-div{background-color:#000} 

Надеюсь, поможет!!

Если вы хотите, чтобы ваши ссылки выглядели так :active class, вы должны определить :visited class такой же, как :active поэтому, если у вас есть ссылки в .example вы делаете что-то вроде этого:

 a.example:active, a.example:visited { /* Put your active state style code here */ } 

Связанный канал Pseudo Class используется для выбора посещенных ссылок, как указано имя.

  • Как сделать кнопку похожим на ссылку?
  • Изменить цвет текста в тексте TextView и щелкнуть?
  • C # regex pattern для извлечения URL-адресов из заданной строки - не полный URL-адрес html, но также и ссылки
  • Откройте внешние ссылки в браузере с веб-браузером Android
  • Как я могу сделать ссылку на клики в NSAttributedString?
  • Facebook share link - можете ли вы настроить текст сообщения?
  • Может ли Google Chrome открывать локальные ссылки?
  • Редактирование гиперссылок и якорей в PDF с помощью ITextSharp
  • Interesting Posts

    Графический подход к векторизации

    Как хранить и извлекать blob из sqlite

    asp.net MVC3 razor: отображение actionlink на основе роли пользователя

    Не удается установить драйвер tap с помощью tapinstall.exe для OpenVPN при запуске из файла .bat, но он работает при запуске установщика OpenVPN

    Как я могу переключить приложение на другое устройство воспроизведения в Windows 10

    Почему многонаследованные функции с таким же именем, но с разными сигнатурами не рассматриваются как перегруженные функции?

    Windows 7: Удаляются ли файлы, расположенные в C: \ Windows \ Installer?

    Windows 8.1 не имеет гипер-v-бланшей использования эмулятора Windows Phone

    Удалить строки из фрейма данных, где строка соответствует строке

    Я отменил резервирование Microsoft 10 и удалил KB3035583, но Window 10 все еще пытается установить

    Как найти максимальное значение в паре RDD?

    NumLock совершенно бесполезен, и я хочу полностью отключить его в Linux

    Хранение изображений в магазинах NoSQL

    Конфигурирование ObjectMapper весной

    String Ресурс новой строки / n невозможен?

    Давайте будем гением компьютера.