Подскажите, как сделать так, чтоб класс "active" добавлялся к тегу ссылке, а не li

Question

Это весь код таба. Он работает отлично, как по клику, так и по наведению. Но мне кое-что нужно подправить. Самому не получается. Что именно нужно изменить: тегу li, при наведении, добавляется класс active. Мне же нужно, чтоб класс active добавлялся к ссылке, тегу a. Если просто в js изменить .tabHeader li на .tabHeader a или .tabHeader li a, то табы перестают работать. Подскажите, как подправить js, чтобы код заработал.

(function($) {
  $.fn.tab = function(options) {
    var opts = $.extend({}, $.fn.tab.defaults, options);
    return this.each(function() {
      var obj = $(this);

      $(obj).find('.tabHeader li').on(opts.trigger_event_type, function() {
        $(obj).find('.tabHeader li').removeClass('active');
        $(this).addClass('active');

        $(obj).find('.tabContent div').hide();
        $(obj).find('.tabContent div').eq($(this).index()).show();
      })
    });
  }
  $.fn.tab.defaults = {
    trigger_event_type: 'mouseover', //mouseover | click 
  };

})(jQuery);


$('.tab-demo').tab();

.tab {
  width: 600px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 20px auto;
  background: #fff;
}

.tabContent>div {
  display: none;
}

.tabHeader {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}

.tabHeader li {
  float: left;
  width: 200px;
  text-align: center;
  cursor: pointer;
  background: url(mesh.png) repeat;
  color: #EFEFEF;
}

.tabHeader li.active {
  background: #4D4F4C;
}

.tabContent .active {
  display: block;
}

.tabContent .tabItem {
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab tab-demo">
  <div class="tabHeader">
    <ul>
      <li class="active"><a href="https://ru.stackoverflow.com">Название 1</a></li>
      <li><a href="https://ru.stackoverflow.com">Название 2</a></li>
      <li><a href="https://ru.stackoverflow.com">Название 3</a></li>
    </ul>
  </div>
  <div class="tabContent">
    <div class="tabItem active">
      Tab content 1
    </div>
    <div class="tabItem">
      Tab content 2
    </div>
    <div class="tabItem">
      Tab content 3
    </div>
  </div>
</div>

БЛОГ НА HUSL

Подскажите, как сделать так, чтоб класс "active" добавлялся к тегу ссылке, а не li

Ответы (0 шт):