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


Пользователь месяца
ShowPrint ShowPrint 1-й за Сентябрь
Очков активности: 283 2 темы, 21 сообщение, 7 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Medvedoc
    #1

    Medvedoc
    Очков активности: 432 8 тем, 48 сообщений, 4 балла репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 225 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #3

    BLIK
    Очков активности: 180 Вне конкурса за определение пользователя месяца

  • Фотография WGN
    #4

    WGN (worldgamenews.com)
    Очков активности: 79.5 Вне конкурса за определение пользователя месяца

  • Фотография Алексей111
    #5

    Алексей111 (xvideo24.ru)
    Очков активности: 66 8 тем, 20 сообщений, 1 балл репутации

  • Фотография Ixman
    #6

    Ixman (o5cat.ru)
    Очков активности: 54 0 тем, 12 сообщений, 3 балла репутации

  • Фотография Игорь Ку
    #7

    Игорь Ку (dudesday.ru)
    Очков активности: 49.5 3 темы, 2 сообщения, 3 балла репутации

  • Фотография yuran
    #8

    yuran (yurbol.ru)
    Очков активности: 34.5 1 тема, 20 сообщений, 1 балл репутации

  • Фотография Zevss
    #9

    Zevss (domles43.ru)
    Очков активности: 22.5 2 темы, 9 сообщений, 1 балл репутации

  • Фотография devpro
    #10

    devpro
    Очков активности: 13.5 0 тем, 9 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 26.09.2018
  • Яндекс выдача: 16.10.2018
Топ 5 участников по репутации


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

#1 Thrash

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

Отправлено 20 October 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 October 2015 - 20:54

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


#2 ShowPrint

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

Отправлено 20 October 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
  • 970 сообщений
  • Репутация: 236

Отправлено 20 October 2015 - 21:50

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


  • 1

Разработка сайтов.



#4 ShowPrint

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

Отправлено 20 October 2015 - 22:05

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


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


#5 TimurR

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

Отправлено 20 October 2015 - 22:15

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

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


  • 0

Разработка сайтов.



#6 ShowPrint

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

Отправлено 20 October 2015 - 22:30

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

 

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

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

 

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


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

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


#7 Thrash

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

Отправлено 20 October 2015 - 22:41

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

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

 

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


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


#8 TimurR

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

Отправлено 20 October 2015 - 22:46

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

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


  • 0

Разработка сайтов.



#9 ShowPrint

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

Отправлено 20 October 2015 - 22:52

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

 

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


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


#10 fedornabilkin

fedornabilkin
  • Модератор
  • 1128 сообщений
  • Репутация: 190

Отправлено 22 October 2015 - 23:39

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

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

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

/reg

/log

/post

 

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

href="/reg

href="/log

href="/post

 

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


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



robot

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


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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