jQuery ui选项卡获取href
jQuery ui选项卡获取href
提问于 2014-10-17 20:36:23
我现在正在使用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 of tab“的选项卡)；
我该怎么做呢？
//catch on change
$("#tabs").tabs({
activate: function() {
console.log($("#tabs").tabs(/* ?? */)); // doesn't working atm
}
});我相信这很简单。
泰！
回答 3
Stack Overflow用户
发布于 2014-10-17 20:45:18
您可以使用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>
Stack Overflow用户
发布于 2014-10-17 20:40:14
使用以下事件获取当前url：
$('#tabs').tabs({
beforeActivate: function(event, ui){
alert('You clicked: ' + $(ui.tab).attr('href'));
}
});Stack Overflow用户
发布于 2014-10-17 20:43:36
试试这个：
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"));
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26425175
复制相关文章
相似问题
腾讯云开发者
