jQuery ui Tabs get href

Question

I'm at the moment using jQuery UI. I've trying to do some tabs..

<div id="tabs" style="width:18%; height:30%; float:right">

        <ul>
            <li><a href="#first" style="font-size:9px; text-align:center;">My_first</a></li>
            <li><a href="#second" style="font-size:9px; text-align:center;">My_second</a></li>
            <li><a href="#third" style="font-size:9px; text-align:center;">My_third</a></li>
            <li><a href="#fourth" style="font-size:9px; text-align:center;">My_fourth</a></li>
        </ul>

</div>

.. and it's work.

But now, I would like when I click on a tabs this :

alert("You click on the tab called " + href of tab);

How can I do this?

//catch on change

    $("#tabs").tabs({
        activate: function() {
            console.log($("#tabs").tabs(/* ?? */)); // doesn't working atm
        }
    });

I'm sure it's pretty easy.

Ty!

Answer 1

You can access the new tab using the newTab property of ui argument as follows:

$("#tabs").tabs({
  activate: function (e, ui) {
    console.log(ui.newTab.find("a").attr("href"));
  }
});

 $("#tabs").tabs({ activate: function(e, ui) { console.log(ui.newTab.find("a").attr("href")); } }); 

 <link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <div id="tabs" style="width:18%; height:30%; float:right"> <ul> <li><a href="first" style="font-size:9px; text-align:center;">My_first</a> </li> <li><a href="second" style="font-size:9px; text-align:center;">My_second</a> </li> <li><a href="third" style="font-size:9px; text-align:center;">My_third</a> </li> <li><a href="fourth" style="font-size:9px; text-align:center;">My_fourth</a> </li> </ul> </div> 

Answer 2

Use the following event to get current url:

$('#tabs').tabs({
  beforeActivate: function(event, ui){
     alert('You clicked: ' + $(ui.tab).attr('href'));
 }
 });

Answer 3

Try this:

HTML:

<div id="tabs" style="width:18%; height:30%; float:right">

        <ul>
            <li><a href="#first" style="font-size:9px; text-align:center;" class="TabLink">My_first</a></li>
            <li><a href="#second" style="font-size:9px; text-align:center;" class="TabLink">My_second</a></li>
            <li><a href="#third" style="font-size:9px; text-align:center;" class="TabLink">My_third</a></li>
            <li><a href="#fourth" style="font-size:9px; text-align:center;" class="TabLink">My_fourth</a></li>
        </ul>

</div>

jQuery:

$(".TabLink").click(function(){
    alert("You clicked on the tab called " + $(this).prop("href"));    
});