Skip to content

All topics  /  jQuery

Jquery UI Tabs Click Event Example

jQuery ·

When “Jquery UI Tabs Click Event Example” moves through design, development and browser testing, practical review can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

In this example, you will learn jquery ui tabs on click event. you can understand a concept of jquery ui tabs event on tab click. This article goes in detailed on jquery tabs click event. this example will help you jquery ui tabs onclick event.

Solution :


$('.nav li a').click(function(){
	var data = $(this).attr("href");
	console.log(data);
});

<!DOCTYPE html>
<html>
<head>
	<title>jquery ui tabs click event example</title>
</head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<body>
<div class="container">
	<h1>jquery ui tabs click event example</h1><br>
  	<ul class="nav nav-tabs">
	    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
	    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
	    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
	    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  	</ul>
  	<div class="tab-content">
	    <div id="home" class="tab-pane fade in active">
		      <h3>HOME</h3>
		      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
	    </div>
    	<div id="menu1" class="tab-pane fade">
      		<h3>Menu 1</h3>
      		<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    	</div>
    	<div id="menu2" class="tab-pane fade">
      		<h3>Menu 2</h3>
      		<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    	</div>
    	<div id="menu3" class="tab-pane fade">
      		<h3>Menu 3</h3>
      		<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    	</div>
  	</div>
</div>
<script type="text/javascript">
	$('.nav li a').click(function(){
		var data = $(this).attr("href");
		console.log(data);
	});
</script>
</body>
</html>

It will help you...

More on this topic