CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user4042832
user4042832

Reputation:

jQuery ui Tabs get href

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!

Upvotes: 1

Views: 2388

Answers (3)

T J
T J

Reputation: 43166

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>

Upvotes: 4

Stan Shaw
Stan Shaw

Reputation: 3034

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"));    
});

Upvotes: 0

jacek_podwysocki
jacek_podwysocki

Reputation: 807

Use the following event to get current url:

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

Upvotes: 0

Related Questions