Добавление / удаление класса active к ссылке

@Targarien · Регистрация: 23.07.2015

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

Подскажите пожалуйста, как добавить /удалить класс active при нажатии на ссылку, которая показывает/скрывает блок.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <table class="info matroska">
        <thead>
            <tr>
                <th>Наименование работы (услуги)</th>
                <th>Годовая плановая стоимость работ (услуг) (руб.)</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>измерение сопротивления изоляции электрических сетей</td>
                <td>26765.91 руб.</td>
                <td><a class="toggle" href="#" onclick="show_table_content('service1'); return false">Подробнее</a></td>
            </tr>
            <tr id="service1" class="inner_table" style="display: none;">

JavaScript
1
2
3
4
5
6
7
8
9
function show_table_content(id){
    display = document.getElementById(id).style.display;
 
    if(display=='none'){
       document.getElementById(id).style.display='table-row';
    }else{
       document.getElementById(id).style.display='none';
    }
}

Далее по таблице идут следующие строки подобного содержания (меняется только id скрытой строки: service2, service3 и т.д.), и нужно что бы класс active добавлялся не ко всем кнопкам "Подробнее", а только к определенной.

Помогите пожалуйста, встал в тупик.

@sad67man · 18.03.2017, 17:51

Targarien,

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function() {
 
  $('.toggle').on('click', function(e) {
    e.preventDefault();
    $(this).toggleClass('active').closest('tr').next('.inner_table').toggle();
  })
  
})

https://jsfiddle.net/9hf0tdmk/1/

@Targarien · 18.03.2017, 19:45 **[ТС]**

Спасибо, работает!!! Правда столкнулся теперь еще с одной проблемой:
- На тех страницах где контент загружается сразу при открытии страницы - все работает;
- А есть такие страницы, где при нажатии на ссылку контент подгружается через ajax, и вот в этом подгруженном контенте скрипт, к сожалению, не работает.
Я так понимаю что проблема из-за "$(document).ready"? Это можно как-либо исправить?
Просто в javascript я почти полный 0!

@Уф · 18.03.2017, 23:11

JavaScript
1
2
3
4
5
6
7
$(document).ready(function() {
   $('table.info.matroska').on('click', '.toggle', function(e) { //в первых скобках ты пишешь блок куда будет загружаться контент
    e.preventDefault();
    $(this).toggleClass('active').closest('tr').next('.inner_table').toggle();
  })
  
})

@Targarien · 20.03.2017, 18:13 **[ТС]**

Так я и не понял в какие скобки надо написать. Куда я только не писал, не работает. В контенте, подгруженном через ajax, при нажатии на ссылку срытые блоки не отображаются, а страницу перекидывает наверх.

Подскажи куда написать. Контент подгружается в div с классом content.

@Уф · 20.03.2017, 19:20

JavaScript
1
2
3
4
5
6
7
$(document).ready(function() {
   $('div.content').on('click', '.toggle', function(e) { //в первых скобках ты пишешь блок куда будет загружаться контент
    e.preventDefault();
    $(this).toggleClass('active').closest('tr').next('.inner_table').toggle();
  })
  
})

@Targarien · 21.03.2017, 19:13 **[ТС]**

Сначала ничего не понял, т.к. пробовал данный вариант и ничего не работало. Подумал что скрипт нерабочий, и уже хотел все бросить... но после продолжительного изучения нашел ошибку. Как говорится сам виноват, все по своей невнимательности. Контент подгружается в div не с классом, а с ID. После исправления все заработало.

СПАСИБО большое!!!

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

@Targarien 5 / 2 / 3 Регистрация: 23.07.2015 Сообщений: 15
	18.03.2017, 19:45 [ТС]
	Спасибо, работает!!! Правда столкнулся теперь еще с одной проблемой: - На тех страницах где контент загружается сразу при открытии страницы - все работает; - А есть такие страницы, где при нажатии на ссылку контент подгружается через ajax, и вот в этом подгруженном контенте скрипт, к сожалению, не работает. Я так понимаю что проблема из-за "$(document).ready"? Это можно как-либо исправить? Просто в javascript я почти полный 0! 0

@Targarien 5 / 2 / 3 Регистрация: 23.07.2015 Сообщений: 15
	20.03.2017, 18:13 [ТС]
	Так я и не понял в какие скобки надо написать. Куда я только не писал, не работает. В контенте, подгруженном через ajax, при нажатии на ссылку срытые блоки не отображаются, а страницу перекидывает наверх. Подскажи куда написать. Контент подгружается в div с классом content. 0

@Targarien 5 / 2 / 3 Регистрация: 23.07.2015 Сообщений: 15
	21.03.2017, 19:13 [ТС]
	Сначала ничего не понял, т.к. пробовал данный вариант и ничего не работало. Подумал что скрипт нерабочий, и уже хотел все бросить... но после продолжительного изучения нашел ошибку. Как говорится сам виноват, все по своей невнимательности. Контент подгружается в div не с классом, а с ID. После исправления все заработало. СПАСИБО большое!!! 0