獲取標籤（DIV）的ID被激活

我使用jQuery 1.9和jQuery UI 1.10獲取標籤（DIV）的ID被激活

我希望能夠一個選項卡上單擊時，爲了獲得標籤ID。例如，如果我點擊名爲「Second」的標籤，我想獲得「tabs-2」響應。

我已經做了下面的代碼至今：

<script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs({ 
      beforeActivate: function (event, ui) { 
       alert(/* the id of the tab (div) being activated */); 
      } 
     }); 
    }); 
</script> 

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">First</a></li> 
     <li><a href="#tabs-2">Second</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>abcde</p> 
    </div> 
    <div id="tabs-2"> 
     <p>fghi</p> 
    </div> 
</div>

來源

2013-01-24 AlvaroV

更新所選答案的時間我相信:) –

測試，與jQueryUI的1.10的工作，如何獲取選項卡的ID：

$("#tabs").tabs({ 
    beforeActivate: function (event, ui) { 
    alert(ui.newPanel.attr('id')); 
    } 
});

來源

2013-02-24 08:23:58 thenickdude

'alert（ui.newTab。 context.innerText）'顯示點擊文本的標籤 –

更新了正確的答案，因爲我認爲這是一個更好的解決方案。感謝Lamah – AlvaroV

只是想知道......使用@AdrienBe建議的方式是錯誤的嗎？ –

var $tabs = $("#tabs").tabs({ 
    select: function(evt, ui) { 
     $("#current").text($(ui.tab).attr('href')); 
    } 
})

UPDATE - 爲jQuery UI的1.10

$(function() { $('#tabs').tabs({ 
      activate: function (event, ui) { 
      var active = $("#tabs").tabs("option", "active"); 
      alert($("#tabs ul>li a").eq(active).attr('href')); 
    } 
});

Updated jsFiddle Demo

來源

2013-01-24 13:17:22 MuhammadHani

您提供的代碼與jquery ui 1.10不完全兼容。無論如何，我想通過點擊選項卡，而不是頁面上的另一個按鈕來獲取數據。無論如何，謝謝 – AlvaroV

@ user1714198 - 請參閱更新的答案。 – MuhammadHani

「更新的jsFiddle演示」顯示了相同的演示，選項卡和顯示選定選項卡ID的外部按鈕。正如我所說的，我想通過點擊標籤來獲取id，而不是頁面上的另一個按鈕。 – AlvaroV

另一種解決方案。如果你想當點擊標籤時獲得一些東西，使用s選舉事件。

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

編輯

改變 '選擇' 到 'beforeActivate'，因爲它已經從1.10

版本中刪除

來源

2013-01-24 13:21:56

感謝，但選擇事件已被刪除jquery ui 1.10 http://jqueryui.com/upgrade-guide/1.10/#removed-select-event-use-beforeactivate – AlvaroV

謝謝你..但如果你想知道如何獲得href ，希望「$（ui.tab）.attr（'href'）」會幫助你。 –

它應該是：$（ui.newTab）.attr（'href'） - > http://api.jqueryui.com/tabs/#event-beforeActivate 無論如何，它什麼也沒有返回 – AlvaroV

使用唱段，控制

alert(ui.newTab.attr("aria-controls"));

來源

2013-01-27 12:00:13

我猜你想知道哪個選項卡被激活，並基於執行各種動作。

而不是獲取ID和從HTML元素的屬性，這裏是你如何做到這一點：

$("#tabs").on("tabsactivate", (event, ui) => { 
    if (ui.newPanel.is("#tabs-1")){ 
     //first tab activated 
    } 
    else{ 
     //second tab activated 
    } 
});

獲得創建的標籤時激活事件不獲取調用。爲此，您需要在組合中添加「tabscreate」事件，但您明白了。

來源

2013-09-28 00:36:08 MoonStom

檢查JQueryUI事件對象（使用Mozilla的Firebug或Chrome開發人員工具等瀏覽器調試程序）。

$("#tabs").tabs({   
    activate: function(event, ui) { 
     console.log(event) //unnecessary, but it's how to look at the event object    
     alert(event.currentTarget.hash) 
    } 
});

來源

2013-10-14 05:01:01 wildbill

這對我的作品

$("#editor_tabs").tabs({ 
    activate: function (event, ui) { 
     $(ui.newTab.find("a").attr("href")).html("Got It"); 
    } 
});

來源

2013-12-06 06:06:09 Eelco

我使用類似的方法通過添加一個類或另一個屬性來製作Tabs ....的各種「風味」，我可以在激活時啓用某些特定的行爲。 –

var id=$("ulselector li.ui-state-active").attr("aria-controls")); 
alert(id);

來源

2014-10-20 06:58:00

在我看來，最簡單的方法是添加data-到<li ...>組成的標籤。

例如：

   <li data-index="2" data-tabname="Notes"> 
        <a href="#tabs-Employee-Notes">Notes</a> 
       </li>

然後處理beforeActivate事件（如果那是你正在尋找的事件）：

$("#jqTabs_EmployeeDetails").tabs({ 
    heightStyle: "fill", 
    beforeActivate: function (event, ui) { 
     var n = ui.newTab; 

     console.log($(n).data()); 
    } 
});

例如，$(n).data("tabname"）將返回選項卡名稱。這也使您可以將所需的任何其他信息添加到選項卡。簡單的解決方案和可擴展的我相信。

來源

2015-01-13 03:53:23 Michael

它爲我

$('#divName .ui-tabs-panel[aria-hidden="false"]').prop('id');

來源

2015-03-11 05:52:37

請給你的答案添加一些解釋。 –

我發現easyest方法是：

$('#tabs .ui-state-active').attr('aria-controls')

這將從DIV巫返回ID是有效的。請記住，您必須將#tabs更改爲您的jquery.tabs ID。

來源

2016-01-20 09:49:11 Frank

獲取標籤（DIV）的ID被激活

回答

相關問題