Навесить активный класс

@richardok · Регистрация: 26.09.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте, передо мной стала такая задача. У маня есть меню аккордеон, я его вывожу при помощи снипета в CMS MODx. Проблема в том, что оно закрыто, т.е. должен быть активный пункт аккордеона открыт, а все остальные закрыты. Т.е. на активный пункт меню должен вешаться class="active", можно ли как нибудь организовать, что бы php сверял ссылку (url текущей страницы) со всеми ссылками в меню, и совпадающей вешал необходимый класс.

@Glart · 18.12.2015, 12:36

Сообщение от richardok

можно ли как нибудь организовать, что бы php сверял ссылку (url текущей страницы) со всеми ссылками в меню, и совпадающей вешал необходимый класс.

Можно.

@Xenox · 18.12.2015, 12:46

Покажите код сниппета и чанка, посмотрим, может что нибудь подскажем

@richardok · 18.12.2015, 12:56 **[ТС]**

Меню:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 <div class="col-md-3">
                            <div class="procedures">
                                <h3>Меню</h3>
                                <div class="panel-group sidebar-nav" id="accordion3">
                                <div class="panel panel-sidebar">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion3" href="#collapse2">
                                                    <i class="fa fa-angle-right"></i> Тело
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapse2" class="panel-collapse collapse">
                                            <div class="panel-body">
                                                [[!getImageList? &tvname=`punkt_menu` &tpl=`menuha` &docid=`1`]]
                                                
                                                
                                            </div>
                                        </div>
                                    </div>
                                        <div class="panel panel-sidebar">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion3" href="#collapse3">
                                                    <i class="fa fa-angle-right"></i> Лицо
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapse3" class="panel-collapse collapse">
                                            <div class="panel-body">
                                            [[!getImageList? &tvname=`punkt_menu2` &tpl=`menuha` &docid=`1`]]
                                                
                                            </div>
                                        </div>
                                    </div>
                                
                                
                                </div>
                            </div>
 </div>

Чанк:

HTML5
1
<a href="[[~[[+id]]]]"><i class="fa fa-angle-right"></i> [[+name]] </a>

Меню сделано migx, т.к. оно не соответствует структуре сайта

@Xenox · 18.12.2015, 14:17

А сам код сниппета? Я пока что вижу один вариант, отдавать в чанк id страницы, на которой находиться пользователь можно взять из url (для примера назвать pageId), и уже в самом чанке сравнивать например так:

HTML5
1
<a href="[[~[[+id]]]]" class="[[+id:is=`[[+pageId]]`:then=`active`:else=``"><i class="fa fa-angle-right"></i> [[+name]] </a>

@richardok · 18.12.2015, 16:10 **[ТС]**

Спасибо, но не совсем понял что делать с pageId?
migx реализован так:
Вкладки формы:

HTML5
1
2
3
4
5
[{"caption":"Image", "fields": [
{"field":"name","caption":"Name"},
{"field":"id","caption":"ID"}
  ]
}]

Разметка колонок:

HTML5
1
2
3
4
5
[{
  "header": "Name", "sortable": "true", "dataIndex": "name"
},{
  "header": "ID", "sortable": "false", "dataIndex": "id"
}]

@Xenox · 18.12.2015, 16:44

Покажите еще адресную строку, мне нужно видеть url. И все же код сниппета хотелось бы увидеть. Я же правильно понимаю что у вас есть сниппет, в нет лежит непосредственно php код? Я просто давно с modx не работал

@richardok · 18.12.2015, 17:13 **[ТС]**

http://www.test.drymba-shop.ru... ij-massazh
вот пример url

Снипета нету, я немного запутался. В том то и дело, что хочу сделать снипет или же через js реализовать, но тоже не знаю как(

@Xenox · 18.12.2015, 17:27

Попробуйте вот так чанк изменить:

HTML5
1
<a href="[[~[[+id]]]]" [[+id:is=`[[*id]]`:then=` class="active"`]]><i class="fa fa-angle-right"></i> [[+name]] </a>

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@richardok 4 / 4 / 0 Регистрация: 26.09.2012 Сообщений: 144

	Навесить активный класс 18.12.2015, 12:29. Показов 1462. Ответов 8 Метки нет (Все метки) Здравствуйте, передо мной стала такая задача. У маня есть меню аккордеон, я его вывожу при помощи снипета в CMS MODx. Проблема в том, что оно закрыто, т.е. должен быть активный пункт аккордеона открыт, а все остальные закрыты. Т.е. на активный пункт меню должен вешаться class="active", можно ли как нибудь организовать, что бы php сверял ссылку (url текущей страницы) со всеми ссылками в меню, и совпадающей вешал необходимый класс. 0

@Xenox 162 / 161 / 66 Регистрация: 28.06.2015 Сообщений: 576
	18.12.2015, 12:46
	Покажите код сниппета и чанка, посмотрим, может что нибудь подскажем 0

@Xenox 162 / 161 / 66 Регистрация: 28.06.2015 Сообщений: 576
	18.12.2015, 16:44
	Покажите еще адресную строку, мне нужно видеть url. И все же код сниппета хотелось бы увидеть. Я же правильно понимаю что у вас есть сниппет, в нет лежит непосредственно php код? Я просто давно с modx не работал 0

@richardok 4 / 4 / 0 Регистрация: 26.09.2012 Сообщений: 144
	18.12.2015, 17:13 [ТС]
	http://www.test.drymba-shop.ru... ij-massazh вот пример url Снипета нету, я немного запутался. В том то и дело, что хочу сделать снипет или же через js реализовать, но тоже не знаю как( 0

Навесить активный класс

Решение