How to highlight the active item Owl-Carousel 2.3.4???

Question

JavaScript

There is a carousel with current item selection navigation.

<div class="owl-carousel">
  <div class="item" id="one" data-hash="one">1</div>
  <div class="item" id="two" data-hash="two">2</div>
  <div class="item" id="tree" data-hash="tree">3</div>
  <div class="item" id="four" data-hash="four">4</div>
  <div class="item" id="five" data-hash="five">5</div>
  <div class="item" id="six" data-hash="six">6</div>
  <div class="item" id="seven" data-hash="seven">7</div>
  <div class="item" id="eigth" data-hash="eigth">8</div>
</div>
<hr>
<a class="button secondary url" href="#one">one</a>
<a class="button secondary url" href="#two">two</a>
<a class="button secondary url" href="#tree">tree</a>
<a class="button secondary url" href="#four">four</a>
<a class="button secondary url" href="#five">five</a>
<a class="button secondary url" href="#six">six</a>
<a class="button secondary url" href="#seven">seven</a>
<a class="button secondary url" href="#eigth">eigth</a>

Here is the output code

$(function() {  
var owl = $('.owl-carousel');  
    owl.owlCarousel({
      items: 4,
      dots: false,
      loop: true,
      margin: 10,
      slideBy: 1,
      URLhashListener: true,
      autoplayHoverPause: true,
      startPosition: 'URLHash'
  });    
});

Help add a class to an element when it is selected from a link. Thank you! PS Logically compare data-hash="one" or id="one" with the URL (www.domen.ru/carousel#one), but there is not enough knowledge how to cut off everything except the word "one". Here is PEN PS2 Ready to pay for the task! <div class="item <i>ACTIVE</i>"></div>

Answer 1

https://codepen.io/anon/pen/mvoYRB
A class highlightedis added that highlights the current element in red