Javascript 如何获取所选选项卡的URL_Javascript_Jquery_Jquery Ui_Jquery Ui Tabs_Jquery Tabs

Javascript 如何获取所选选项卡的URL

javascript jquery jquery-ui

Javascript 如何获取所选选项卡的URL,javascript,jquery,jquery-ui,jquery-ui-tabs,jquery-tabs,Javascript,Jquery,Jquery Ui,Jquery Ui Tabs,Jquery Tabs,我想在Jquery默认选项卡中动态应用数据但是我怎样才能得到所选的标签呢 HTML: <!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax

我想在Jquery默认选项卡中动态应用数据但是我怎样才能得到所选的标签呢

HTML:

<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">         </script>
 </head>
<body style="font-size:62.5%;">

<div id="tabs">
   <ul>
</ul>
</div>
<input type='button' id='addTab' value='Add Tab'>
<input type='button' id='appendText' value='Add Text in Tab'>

</body>
</html>

JS:

JS小提琴

试试以下方法：

$('#tabs li').click(function(){
   console.log($(this).children('a').attr('href'));
});

只需键入“未测试”

即可获得所选选项卡的索引，其中包含

var selected = $tabs.tabs('option', 'selected'); // selected tab index integer

…并将其映射到相应的HTML元素

或者，您可以在所选选项卡上添加/删除自己的自定义类，并通过该类进行选择

var url = $('.mySelectedTab').child('a').attr('href');

编辑：实际上jQuery可能会在所选选项卡上添加自己的类。只是在任何地方都没有清楚的记录。尝试在浏览器上检查元素以查找类。

当您单击选项卡时，类ui状态“活动”将应用于该选项卡，而该类将从以前活动的选项卡中删除。知道了这一点，您可以在CSS选择器中使用该类来添加内容

或者，也可以使用选定的类ui选项卡

jQuery选项卡HTML：

当然，很可能会有一个API来更方便地访问这些信息。但是，这是一种更低级的方法，可以帮助您了解jQuery选项卡的工作原理。

用以下代码附加文本：

$(".ui-tabs-panel").not(".ui-tabs-hide").append("Bla Bla!!!");

这里是JSFiddle链接

如果要在选项卡标题中添加文本：

$(".ui-tabs-selected").append("Bla Bla!!!");

我不知道您是想获取所选选项卡的url，还是想在所选选项卡的面板中添加文本。如果您想从所选选项卡获取url，那么要查找的是名为：UITabs selected的jQueryUI选项卡类。但是，如果您想将文本附加到所选选项卡面板，则要查找的类是ui选项卡隐藏，而不是不查找。下面是第二个选项的代码

看看我的答案。为了获得这些信息，我对插件进行了反向工程，并且一直在使用这种方法。然而，直到现在我才意识到您可以调用$tabs.tabs并使用API。我得好好玩玩+谢谢你教我新东西！

// get selected tab, either #fragment-1, #fragment-2, or #fragment-3
var id = $('#tabs').find('.ui-state-active).find("a").attr("href"); 

// now use that id to get a reference to the selected body
$('div'+id).append("Bla!!");

$(".ui-tabs-panel").not(".ui-tabs-hide").append("Bla Bla!!!");

$(".ui-tabs-selected").append("Bla Bla!!!");

$('#appendText').live('click', function() {
//iterate through all tab panels.
    $('#tabs .ui-tabs-panel').each(function(index) {
         //check if the tab is not hidden, i.e. disregard all hidden tabs.
         if(!($(this).hasClass('ui-tabs-hide'))){
             //do the dew!
             $(this).append("Bla Bla!!!");
             return;
         }
    });
});