jQuery addClass example

Change class name on click in jQuery

by James Bradley

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" ).has( '[data-name="Products"]' ).get( 0 );
  /* $('.nav-tab span')[1].innerText='Merchandise';
  $('.nav-tab')[1].hover(function () {
        $(this).addClass('red-border');
    }, function () {
        $(this).removeClass('red-border');
    }); */
products.hover(
    function() { $(this).addClass("red-border") },
    function() { $(this).removeClass("red-border"); }
  );
  products.find('span').innerText="Merchandise";
  
  
});