In this tutorial, we will learn Jquery UI Tabs Click Event 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 into detail on jquery tabs click event. this example will help you jquery UI tabs on click events.


Solution :

$('.nav li a').click(function(){

	var data = $(this).attr("href");

	console.log(data);

});

Example:

<!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>

May this example help you.