Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
0 / 0 / 1
Регистрация: 30.09.2015
Сообщений: 18
1

Добавить динамически активный класс в субменю

26.11.2015, 14:55. Показов 2269. Ответов 28
Метки нет (Все метки)

Имеется код:
HTML5
1
2
3
4
5
6
7
8
<ul class="uk-subnav uk-subnav-line uk-margin-remove">
    <li class="uk-h3 uk-margin-remove">
        <a href="http://www.mysite.com/product">Product</a>
    </li>
    <li class="uk-h3 uk-margin-remove">
        <a href="http://www.mysite.com/demo">Demo</a>
    </li>
</ul>
Как сделать так чтобы после загрузки пунктов суб-меню, к активному пункту добавлялся динамически класс "active"??

В гугле много по этому поводу материалов, но почему то у меня ничего не получается.

Помогите мне разобраться на моем личном примере, дабы я в будущем не задавал таких "глупых" вопросов с точки зрения прогграмиста.
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
26.11.2015, 14:55
Ответы с готовыми решениями:

Как добавить активный класс объекта?
Доброго всем дня. Мне нужно создать активный класс объекта. Но при вызове контекстного меню этот...

Как в bootstrap 3 добавить класс для блока, если активный — sm или xs?
Добрый день, мне нужно, чтобы если экран становится узким, то к блоку должен добавляться класс,...

Активный класс ul li?
Всем привет! Помогите пожалуйста) В общем как мне сделать так как на скрине? (ниже). 1-й скрин как...

Аккордеон и активный класс
Есть аккордеон на jquery $(document).ready(function() { // q_list will be a list tat keeps...

28
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
26.11.2015, 15:07 2
Лучший ответ Сообщение было отмечено Istrati как решение

Решение

Javascript
1
2
3
window.addEventListener("load", function(){
  document.querySelector("a[href='" + widnow.location.href + "']").classList.add("active");
});
Будет работать только если у ссылки указан полный путь в href. Вот так
Цитата Сообщение от Istrati Посмотреть сообщение
<a href="http://www.mysite.com/product">
1
0 / 0 / 1
Регистрация: 30.09.2015
Сообщений: 18
26.11.2015, 15:36  [ТС] 3
Извините, а куда и как этот скрипт добавить?
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
26.11.2015, 15:50 4
Лучший ответ Сообщение было отмечено Istrati как решение

Решение

HTML5
1
2
3
4
5
6
7
8
9
<body>
content...
.
.
.
<script>
/*тут */
</script>
</body>
самый простой вариант
1
0 / 0 / 1
Регистрация: 30.09.2015
Сообщений: 18
26.11.2015, 15:57  [ТС] 5
Сделал вот так вот. Никакого эффекта.
Может быть дело в том что это HTML модуль Joomla! ???

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<body>
 
<ul class="uk-subnav uk-subnav-line uk-margin-remove">
    <li class="uk-h3 uk-margin-remove">
        <a href="http://www.mysite.com/product">Product</a>
    </li>
    <li class="uk-h3 uk-margin-remove">
        <a href="http://www.mysite.com/demo">Demo</a>
    </li>
</ul>
 
<script>
window.addEventListener("load", function(){
  document.querySelector("a[href='" + widnow.location.href + "']").classList.add("uk-active");
});
</script>
 
</body>
</html>
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
26.11.2015, 16:02 6
Лучший ответ Сообщение было отмечено Istrati как решение

Решение

Цитата Сообщение от Istrati Посмотреть сообщение
("a[href='" + widnow.location.href + "']")
там window, опечатка)
1
0 / 0 / 1
Регистрация: 30.09.2015
Сообщений: 18
26.11.2015, 16:06  [ТС] 7
Но как сделать чтобы класс добавлялся не в <a> а в <li>???
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
26.11.2015, 16:18 8
Заменить на это
Javascript
1
document.querySelector("a[href='" + window.location.href + "']").parentNode.classList.add("uk-active");
1
0 / 0 / 1
Регистрация: 30.09.2015
Сообщений: 18
26.11.2015, 18:48  [ТС] 9
WOW!!!
Наконец-то работает))

Выражаю огромную благодарность за оказанную помощь!!!

Добавлено через 2 часа 26 минут
Еще вопрос)))
HTML5
1
<a href="http://www.mysite.com/product">
Эти ссылки имеют дочерние вложения.
Т.е. http://www.mysite.com/product/1
http://www.mysite.com/product/2 и тд.
Если переходить в эти вложения класс active не добавляется.

Как сделать что-бы класс оставался активным при переходе в дочерние вложения??

Буду очень признателен!
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
26.11.2015, 20:01 10
Цитата Сообщение от Istrati Посмотреть сообщение
Как сделать что-бы класс оставался активным при переходе в дочерние вложения??
Нужно подключить скрипт на этих страницах.
Вынесите скрипт в отдельный файл script_name.js
в файле шаблона index.php
HTML5
1
2
3
4
5
6
<body>
content...
.
.
<script type="text/javascript" src="script_name.js"></script>
</body>
script_name.js должен лежать в той же папке, что и index.php
0
0 / 0 / 1
Регистрация: 30.09.2015
Сообщений: 18
26.11.2015, 20:29  [ТС] 11
Такой метод не представляется возможным для меня(

А есть другие способы это реализовать?
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
26.11.2015, 20:59 12
Цитата Сообщение от Istrati Посмотреть сообщение
Такой метод не представляется возможным для меня(
А как вы до этого добавляли скрипт?
1
0 / 0 / 1
Регистрация: 30.09.2015
Сообщений: 18
26.11.2015, 21:22  [ТС] 13
Это всего лишь HTML модуль в CMS Joomla!
До сих пор я пользовался уже готовыми расширениями.
Сейчас появилась необходимость сделать маленькое кастомное меню.
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
26.11.2015, 21:25 14
Цитата Сообщение от Istrati Посмотреть сообщение
Это всего лишь HTML модуль в CMS Joomla!
Я так понял, у вас нет ftp доступа и вы не можете залить файл. Но вы можете править шаблон. Зайдите в менеджер шаблонов там выберете файл шаблона index.php и впишите туда скрипт
HTML5
1
2
3
4
5
6
7
8
<body>
content...
.
.
<script type="text/javascript">
  document.querySelector("a[href='" + window.location.href + "']").parentNode.classList.add("uk-active");
</script>
</body>
1
0 / 0 / 1
Регистрация: 30.09.2015
Сообщений: 18
26.11.2015, 21:48  [ТС] 15
Доступ к FTP есть.

Создать файл и добавить всего лишь эту строку?
Javascript
1
document.querySelector("a[href='" + window.location.href + "']").parentNode.classList.add("uk-active");
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
26.11.2015, 21:50 16
Цитата Сообщение от Istrati Посмотреть сообщение
Создать файл и добавить всего лишь эту строку?
Если добавляете в конце body - да.
Если в head -
Javascript
1
2
3
window.addEventListener("load", function(){
document.querySelector("a[href='" + window.location.href + "']").parentNode.classList.add("uk-active");
})
1
0 / 0 / 1
Регистрация: 30.09.2015
Сообщений: 18
26.11.2015, 22:11  [ТС] 17
добавил - не работает (((

Добавлено через 5 минут
Вот такая ошибка выскакивает
Uncaught TypeError: Cannot read property 'parentNode' of null
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
27.11.2015, 11:06 18
Цитата Сообщение от Istrati Посмотреть сообщение
Вот такая ошибка выскакивает
Javascript
1
2
3
4
window.addEventListener("load", function(){
if(document.querySelector("a[href='" + window.location.href + "']"))
  document.querySelector("a[href='" + window.location.href + "']").classList.add("uk-active");
});
Напишите это. И код работает только если у ссылок в href указан полный путь, например, <a href="http://mysite.com/blog/1.html">. Скрипт сравнивает содержимое атрибута href у ссылок и адрес в адресной строке браузера
0
0 / 0 / 1
Регистрация: 30.09.2015
Сообщений: 18
27.11.2015, 12:11  [ТС] 19
Ошибка исчезла.
Но скрипт не работает во вложенных страницах.
0
Эксперт HTML/CSS
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
27.11.2015, 12:13 20
Цитата Сообщение от Shakalaka Посмотреть сообщение
И код работает только если у ссылок в href указан полный путь, например, <a href="http://mysite.com/blog/1.html">. Скрипт сравнивает содержимое атрибута href у ссылок и адрес в адресной строке браузера
Следовательно href ссылок не совпадает с url в адресной строке. Выложите html код страницы на которой не работает
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
27.11.2015, 12:13

Навесить активный класс
Здравствуйте, передо мной стала такая задача. У маня есть меню аккордеон, я его вывожу при помощи...

AddClass - не активный класс
Добрый день. Скажите пожалуйста почему при создании класса с помощью «addClass», этот ново...

Как добавлять активный класс
Всем доброго времени суток, есть код страницы: &lt;?php echo &quot;&lt;title&gt;Каталог Файлов - Название...

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru