1

Есть боковое меню, по клику на пункт которого загружается контент в div через ajax. Не могу понять, как подсвечивать активный пункт меню. Пытался всякими способами это сделать, но без результатно. У меня deadline :(( Пожалуйста, помогите.. Код приведен.

$(document).ready(function () {

    $('.middle_content_servicesdescriptions_content_descriptionandmenu_menu a').click(function () {
        
        $('.middle_content_servicesdescriptions_content_descriptionandmenu_menu a span').removeClass('active');
        let n =$('.middle_content_servicesdescriptions_content_descriptionandmenu_menu a').index(this);
        $('.middle_content_servicesdescriptions_content_descriptionandmenu_menu a span').addClass('active');

    });
    
    $(".middle_content_servicesdescriptions_content_descriptionandmenu_menu a").click(function(){
        
        $.ajax({
            method: 'post',
            url: $(this).attr('data_target'),
            cache: false,
            success: function(html){
                $(".middle_content_servicesdescriptions_content_descriptionandmenu_content").html(html);
            }
        });
        return false;

    });
    
   });
   
.middle_content_servicesdescriptions_content_descriptionandmenu_menu {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 height: 500px;
 margin: 100px 0 0 0;
 user-select: none;
}

.middle_content_servicesdescriptions_content_descriptionandmenu_menu_section {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.middle_content_servicesdescriptions_content_descriptionandmenu_menu_section_text {
  font-family: RobotoCondensed;
  font-style: normal;
  font-weight: normal;
  font-size: 20px;
  line-height: 23px;
  color: #000000;
  padding: 0 0 0 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="middle_content_servicesdescriptions_content_descriptionandmenu_menu">
                            <a class="middle_content_servicesdescriptions_content_descriptionandmenu_menu_section"
                                data_target="content/1.html">
                                <img src="img/icons/002.png" alt="">
                                <span
                                    class="middle_content_servicesdescriptions_content_descriptionandmenu_menu_section_text">
                                    test1
                                </span>
                            </a>
                            <a class="middle_content_servicesdescriptions_content_descriptionandmenu_menu_section"
                                data_target="/content/2.html">
                                <img src="img/icons/001.png" alt="">
                                <span
                                    class="middle_content_servicesdescriptions_content_descriptionandmenu_menu_section_text">
                                    test2
                                </span>
                            </a>
                            <a class="middle_content_servicesdescriptions_content_descriptionandmenu_menu_section"
                                data_target="content/3.html">
                                <img src="img/icons/004.png" alt="">
                                <span
                                    class="middle_content_servicesdescriptions_content_descriptionandmenu_menu_section_text">
                                    test3
                                </span>
                            </a>
                            <a class="middle_content_servicesdescriptions_content_descriptionandmenu_menu_section"
                                data_target="content/4.html">
                                <img src="img/icons/0036.png" alt="">
                                <span
                                    class="middle_content_servicesdescriptions_content_descriptionandmenu_menu_section_text">
                                    test4
                                </span>
                            </a>
                            <a class="middle_content_servicesdescriptions_content_descriptionandmenu_menu_section"
                                data_target="content/5.html">
                                <img src="img/icons/005.png" alt="">
                                <span
                                    class="middle_content_servicesdescriptions_content_descriptionandmenu_menu_section_text">
                                    test5
                                </span>
                            </a>
                            <a class="middle_content_servicesdescriptions_content_descriptionandmenu_menu_section"
                                data_target="content/6.html">
                                <img src="img/icons/006.png" alt="">
                                <span
                                    class="middle_content_servicesdescriptions_content_descriptionandmenu_menu_section_text">
                                    test6
                                </span>
                            </a>
                        </div>

3
  • в css сюда забыл добавить класс active - .active { color: #B72A20; }
    – rabbit
    27 апр 2020 в 15:00
  • Зачем вы делаете название классов такой длины? Это же невозможно прочесть
    – Neolot
    27 апр 2020 в 15:01
  • Просто у меня методика такая - задавать двревовидное название. Прошу прощения. На будущее учту.
    – rabbit
    27 апр 2020 в 15:06

1 ответ 1

1

Вариант JavaScript

const navigation = document.querySelector('.navigation')
navigation.addEventListener('click', function(e) {
  const mains = document.querySelectorAll('.main')
  const target = e.target
  Array.from(mains).forEach(main => {
    main.classList.remove('active')
  })
  target.classList.add('active')
})
.active { background-color: red; color: white; }
<div class="navigation">
  <div class="main">Меню 1</div>
  <div class="main">Меню 2</div>
  <div class="main">Меню 3</div>
</div>

Вариант jQuery

$(document).ready(function() {
  $('.navigation').on('click', 'a', function() {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      return;
    }
    $('a').removeClass('active');
    $(this).addClass('active');
  });
});
a {display: block;}
.active {background-color: red; color: white;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation">
  <a class="main">Меню 1</a>
  <a class="main">Меню 2</a>
  <a class="main">Меню 3</a>
</div>

7
  • сделал по аналогии - не работает. Может дело во вложенных тегах span, внутри тега a?
    – rabbit
    27 апр 2020 в 15:21
  • const navigation = document.querySelector('.middle_content_servicesdescriptions_content_descriptionandmenu_menu a') navigation.addEventListener('click', function(e) { const mains = document.querySelectorAll('.middle_content_servicesdescriptions_content_descriptionandmenu_menu a>span') const target = e.target Array.from(mains).forEach(main => { main.classList.remove('active') }) target.classList.add('active') })
    – rabbit
    27 апр 2020 в 15:21
  • второй вариант работает) но есть маленький момент... когда кликаешь чуть ниже текста пункта меню, то стиль active не применяется, а контент загружается.
    – rabbit
    27 апр 2020 в 15:45
  • слева от каждого пункта меню есть картинка. Если кликать на них, но стиль тоже не меняется, а контент так же загружается.
    – rabbit
    27 апр 2020 в 15:48
  • да, верно, по тегу а
    – rabbit
    27 апр 2020 в 15:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.