javascript - jQuery ui 选项卡获取 href

Question

我目前正在使用 jQuery UI。我正在尝试做一些选项卡..

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

..成功了。

但是现在，当我单击选项卡时，我希望:

alert("您点击了名为“的选项卡+选项卡的href);

我该怎么做？

//catch on change

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

我确信这非常简单。

泰!

Answer 1

您可以使用 ui 参数的 newTab 属性访问新选项卡，如下所示:

$("#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>