Перейти к содержимому


Выбрать шаблон и создать сайт

Добавить class="active" в меню, выводимое с помощью цикла

#1 Thrash

Thrash
  • Пользователь PRO
  • 620 сообщений
  • Репутация: 53
0

Отправлено 20 Октябрь 2015 - 20:53

Всем привет! На сайте имеется меню, а точнее фильтр, пункты которого выводятся циклом из базы. Нужно при клике на пункт добавлять 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 Октябрь 2015 - 20:54

  • 0
Изображение


#2 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 700 сообщений
  • Репутация: 405

Отправлено 20 Октябрь 2015 - 21:20

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

<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() {...

 

Если не поможет, то надо ждать гуру...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#3 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 20 Октябрь 2015 - 21:50

Дэржи рабочий вариант :) Стили уже сам допишешь думаю http://codepen.io/anon/pen/gaoXxK


  • 1

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#4 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 700 сообщений
  • Репутация: 405

Отправлено 20 Октябрь 2015 - 22:05

"Поковырялся в песочнице" @TimurR, и сделал из него вариант через toggleClass


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#5 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 20 Октябрь 2015 - 22:15

@ShowPrint, так цель была добавить класс. toggleClass при повторном клике на элемент удалит класс.  

или так и надо? 


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#6 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 700 сообщений
  • Репутация: 405

Отправлено 20 Октябрь 2015 - 22:30

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

 

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

Сорри за ламмерский вопрос и заранее спасибо за ответ...

 

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


Сообщение отредактировал ShowPrint: 20 Октябрь 2015 - 22:30

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#7 Thrash

Thrash
    Topic Starter
  • Пользователь PRO
  • 620 сообщений
  • Репутация: 53

Отправлено 20 Октябрь 2015 - 22:41

@TimurR, работает, спасибо. Но работает временно. Эта форма у меня отправляется аякс запросом и работает оно, пока не отправится аякс запрос, то есть секунду) 

вариант через toggleClass

 

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


  • 0
Изображение


#8 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 20 Октябрь 2015 - 22:46

@ShowPrint, честно скажу, хрен его знает :) Пишу как учили. Вообще надо почитать пару книг, а то так и буду за еду верстать :D

@Thrash, можно ссылку на страницу?  


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#9 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 700 сообщений
  • Репутация: 405

Отправлено 20 Октябрь 2015 - 22:52

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

 

Сорри за оффтоп... :ph34r:


  • 1
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#10 fedornabilkin

fedornabilkin
  • Пользователь
  • 696 сообщений
  • Репутация: 91

Отправлено 22 Октябрь 2015 - 23:39

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

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

Есть страницы:

/reg

/log

/post

 

и ссылки в меню

href="/reg

href="/log

href="/post

 

Парсим урл страницы, на которой находимся и сравниваем в цикле с каждым пунктом меню, если есть совпадение, то добавляем класс.


  • 0
Как часто в горестной разлуке,В моей блуждающей судьбе, ФО, я думал о тебе.


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru