X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Добавить class="active" в меню, выводимое с помощью цикла
Thrash
Thrash
Topic Starter сообщение 20.10.2015, 21:53; Ответить: Thrash
Сообщение #1


Всем привет! На сайте имеется меню, а точнее фильтр, пункты которого выводятся циклом из базы. Нужно при клике на пункт добавлять class="active", который по традиции будет менять его, чтобы как-то отличить от неактивных. Вот что у нас в цикле:
 


<form action='' method='POST' style='display: inline-block;'>
<input id='country-btn' type='submit' value='".$name."'>
<input type='hidden' name='tab' value='".$id."'>
</form>


Кнопка submit и есть пункт фильтра. Вот в нее и надо добавить класс при клике. Пробовал так:
 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">     
 $(function() {
         $("#country-btn").click(function() {
                     
             $(this).toggleClass("active");
         })
    });      
</script>

И что-то... ничего (

Help me, guys!


Сообщение отредактировал Thrash - 20.10.2015, 21:54
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
сообщение 20.10.2015, 22:20; Ответить: ShowPrint
Сообщение #2


А если вот так попробовать:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$("#country-btn").click(function() {
$(this).toggleClass("active");
});
</script>

Совсем не силен в jQuery, если не сказать наоборот, но что-то меня подсознательно смущает в $(function() {...

Если не поможет, то надо ждать гуру...
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
TimurR
TimurR
сообщение 20.10.2015, 22:50; Ответить: TimurR
Сообщение #3


Дэржи рабочий вариант :) Стили уже сам допишешь думаю http://codepen.io/anon/pen/gaoXxK
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
сообщение 20.10.2015, 23:05; Ответить: ShowPrint
Сообщение #4


"Поковырялся в песочнице" TimurR, и сделал из него вариант через toggleClass
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
TimurR
TimurR
сообщение 20.10.2015, 23:15; Ответить: TimurR
Сообщение #5


ShowPrint, так цель была добавить класс. toggleClass при повторном клике на элемент удалит класс.  
или так и надо? 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
сообщение 20.10.2015, 23:30; Ответить: ShowPrint
Сообщение #6


TimurR, возможно... С задачей добавления класса ты справился "на ура"... Я сделал "переключатель" скажем "для комплекта", опираясь на то, что может быть не просто так Thrash использовал именно toggleClass...

Пользуясь случаем задам вопрос, как всегда глупый, TimurR подскажи какую смысловую нагрузку несет контейнер $(function(){ ... }); Как-то я логику "зачем он нужен" слабо улавливаю... Или это из разряда "хорошего стиля программирования"?
Сорри за ламмерский вопрос и заранее спасибо за ответ...

ЗЫ. Thrash, кстати Ваш исходный код вполне может не работать из-за пропущенной ";" во "внутренней обёртке"... ;)


Сообщение отредактировал ShowPrint - 20.10.2015, 23:30
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Thrash
Thrash
Topic Starter сообщение 20.10.2015, 23:41; Ответить: Thrash
Сообщение #7


TimurR, работает, спасибо. Но работает временно. Эта форма у меня отправляется аякс запросом и работает оно, пока не отправится аякс запрос, то есть секунду) 
(ShowPrint @ 21.10.2015, 01:05) *
вариант через toggleClass


Вот и ваш вариант попробовал, хотя в принципе результат очевиден: все так же работает, пока не выполниться аякс-запрос. В общем, вся загвоздка в нем. Получается, оно перезагружает страницу асинхронно и после отправки запроса все возвращается в исходное положение. 
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
TimurR
TimurR
сообщение 20.10.2015, 23:46; Ответить: TimurR
Сообщение #8


ShowPrint, честно скажу, хрен его знает :) Пишу как учили. Вообще надо почитать пару книг, а то так и буду за еду верстать :D
Thrash, можно ссылку на страницу?  
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ShowPrint
ShowPrint
сообщение 20.10.2015, 23:52; Ответить: ShowPrint
Сообщение #9


TimurR, омары с черной икрой - тоже "еда"... В наше время не быть голодным - это уже хорошо... ;)

Сорри за оффтоп... :ph34r:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
fedornabilkin
fedornabilkin
сообщение 23.10.2015, 0:39; Ответить: fedornabilkin
Сообщение #10


(Thrash @ 20.10.2015, 23:53) *
Нужно при клике на пункт добавлять class="active", который по традиции будет менять его, чтобы как-то отличить от неактивных.

Насколько я понимаю, этот класс необходимо задавать в цикле. Если пользователь придет на страницу, то кнопка должна быть активной.
Есть страницы:
/reg
/log
/post

и ссылки в меню
href="/reg
href="/log
href="/post

Парсим урл страницы, на которой находимся и сравниваем в цикле с каждым пунктом меню, если есть совпадение, то добавляем класс.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Проверка позиций сайтов в поисковых системах с помощью Positon.ru
Мониторинг продвижения сайтов
182 Positon 178479 23.2.2024, 9:53
автор: Positon
Открытая тема (нет новых ответов) Раскройте свой потенциал заработка с помощью 2x2 Media Network — вашего пути к выгодным предложениям CPA!
Присоединяйтесь к 2x2 Media Network, вашему надежному партнеру в мире
8 2x2MediaLimited 2625 22.2.2024, 6:39
автор: 2x2MediaLimited
Открытая тема (нет новых ответов) Восстановить сайт + добавить исходные данные
5 Portsmouth 1947 21.5.2023, 7:23
автор: Skyworker
Открытая тема (нет новых ответов) WEB и SMM дизайн — решение ваших бизнес задач с помощью дизайна
8 justburger 5296 6.7.2020, 9:18
автор: justburger
Открытая тема (нет новых ответов) Нужно добавить несколько компаний в Google Miй бiзнес
1 Barselona 1992 10.8.2019, 10:19
автор: Barselona


 



RSS Текстовая версия Сейчас: 19.3.2024, 11:28
Дизайн