jQuery addClass example

Change class name on click in jQuery

HTML

<nav>
  <div class="nav-tab">
    <a class="nav-link" data-name="About">
      <div class="item-menu">
        <span>About</span>
      </div>
    </a>
  </div>
  <div class="nav-tab">
    <a class="nav-link" data-name="Products">
      <div class="item-menu">
        <span>Products</span>
      </div>
    </a>
  </div>
  <div class="nav-tab">
    <a class="nav-link" data-name="Contact">
      <div class="item-menu">
        <span>Contact</span>
      </div>
    </a>
  </div>
</nav>

CSS

.red-border {
  border: 2px solid red;
}

JavaScript

$(document).ready(function() {
  let products = $(".nav-tab").find('[data-name="Products"]');
  /* $('.nav-tab span')[1].innerText='Merchandise';
  $('.nav-tab')[1].hover(function () {
        $(this).addClass('red-border');
    }, function () {
        $(this).removeClass('red-border');
    }); */
  products.hover(
    function() {
      $(this).parent().addClass("red-border")
    },
    function() {
      $(this).parent().removeClass("red-border");
    }
  );
  products.find('span').text("Merchandise");


});