jQuery addClass example

Change class name on click in jQuery

by Arif

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() {
	var products = $( ".nav-tab").find("[data-name='Products']");
  products
  .mouseover(function(){
    $(this).find("span").text("Merchandise").closest(".nav-tab").addClass("red-border");
  })
  .mouseout(function(){
  console.log(this);
    $(this).parent(".nav-tab").removeClass("red-border");
    //Again if you want to replace "Merchandise" to "Product" then active this commanded line
    //$(this).closest(".nav-tab").removeClass("red-border").find("span").text("Products");
  });
});