Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
​
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  
  <body>
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
    
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  </body>
</html>
 
.nav {
  float: left;
  width: 100%;
  list-style-type: none;
}
​
.nav li {
  float: left;
  margin-right: 15px
}
​
li.active a {
  font-weight: bold; 
  text-decoration: none;
}
 
$(function(){
  // store reference to ALL li elements that are children of ul.nav
  let $links = $('ul.nav li')
  
  // Add click event to each link
  // using special jquery object $(this) 
  // to reference each element that was matched
  
​
  $links.on('click', function(){
    
    // Remove the active class from all links
    $links.removeClass('active')
    
    // Add the active class to the link that was clicked
    // which is refererenced by $(this)
    $(this).addClass('active')
  })
​
})
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x