jQuery - 陷印選項卡選擇事件

我是jQuery noob，我試圖找出如何捕獲選項卡選定的事件。使用jQuery 1.2.3和相應的jQuery UI選項卡（不是我的選擇，我無法控制它）。這是一個帶有第一級div名稱 - 選項卡的嵌套選項卡。這是我的初始化標籤jQuery - 陷印選項卡選擇事件

$(function() { 
     $('#tabs ul').tabs(); 
}); 

$(document).ready(function(){ 
    $('#tabs ul').tabs('select', 0); 
});

我無法弄清楚如何捕獲任何事件或屬性（選中的標籤，當標籤點擊等）。希望得到任何幫助......

我試過的東西：

$('#tabs ul').bind('tabsselect', function(event, ui) { 
    selectedTab = ui.index; 
    alert('selectedTab : ' + selectedTab); 
}); 

       (OR) 

$('#tabs').bind('tabsselect', function(event, ui) {

沒有成功。

下面是標記

<div id="tabs"> 
<UL> 
    <LI><A href="#fragment-1"><SPAN>Tab1</SPAN></A></LI> 
    <LI><A href="#fragment-2"><SPAN>Tab2</SPAN></A></LI> 
    <LI><A href="#fragment-3"><SPAN>Tab3</SPAN></A></LI> 
    <LI><A href="#fragment-4"><SPAN>Tab4</SPAN></A></LI> 
</UL> 

<DIV id=fragment-1> 
<UL> 
    <LI><A href="#fragment-1a"><SPAN>Sub-Tab1</SPAN></A></LI> 
    <LI><A href="#fragment-1b"><SPAN>Sub-Tab2</SPAN></A></LI> 
    <LI><A href="#fragment-1c"><SPAN>Sub-Tab3</SPAN></A></LI> 
</UL> 
</DIV> 
. 
. 
. 

</DIV>

來源

2010-09-04 Bob76

這是一個jquery-ui問題？如果是這樣，請正確標記 –

捕捉選項卡評選活動的正確方法是設置一個函數作爲select選項初始化標籤（你也可以將它們設置動態之後）時，如價值所以：

$('#tabs, #fragment-1').tabs({ 
    select: function(event, ui){ 
    // Do stuff here 
    } 
});

你可以看到在行動的實際代碼在這裏：http://jsfiddle.net/mZLDk/

編輯：有了你給我的鏈接，我用jQuery UI 1.5創建了jQuery 1.2.3的測試環境（我認爲？）。有些事情明顯改變了。沒有與原始event對象分開的單獨的ui對象。代碼看起來像這樣：

// Tab initialization 
$('#container ul').tabs({ 
    select: function(event) { 
     // You need Firebug or the developer tools on your browser open to see these 
     console.log(event); 
     // This will get you the index of the tab you selected 
     console.log(event.options.selected); 
     // And this will get you it's name 
     console.log(event.tab.text); 
    } 
});

Phew。如果有什麼需要學習的地方，那就是支持遺留代碼很難。看到更多的jsfiddle：http://jsfiddle.net/qCfnL/1/

來源

2010-09-04 10:36:12

這在jsfiddle中很好用，但是當我將它複製到我的代碼時，我得到一個「索引」爲空或不是對象錯誤。思考？ – Bob76

@user您正在使用* jQuery 1.2.3 *，對不對？該演示使用jQuery UI 1.7.2在1.3.2中設置。這是他們擁有的最古老的版本。現在爲舊版本找到所需的文檔是不可能的，所以儘管你可以嘗試用'tabselect'替換'select' - 更改日誌表示'select'是在tab選擇後的某個時候引入的'以取代它。 –

非常感謝。我認爲我們的代碼基於http://cse-mjmcl.cse.bris.ac.uk/blog/2008/05/15/1210851116949.html，並且使用了ui標籤的早期版本。我正在閱讀本演示所基於的站點上的文檔，並且看到了像您提到的tabselect參考。希望我能找出解決方案。謝謝。 – Bob76

從我可以告訴，根據這裏的文檔：http://jqueryui.com/demos/tabs/#event-select，好像你沒有完全初始化它的權利。演示表明，您需要主要包裝<div>元素，其中<ul>或可能<ol>元素代表標籤，然後是每個標籤頁的元素（如果我們使用的是HTML5，可能推薦使用<div>或<p>，可能是<section>）。然後在主要的<div>上調用$（）。tabs（），而不是<ul>元素。

之後，你可以綁定到tabsselect事件沒有問題。看看這個搗鼓基本的，基本的例子：

http://jsfiddle.net/KE96S/

來源

2010-09-04 10:57:59 rossipedia

似乎老的版本的jQuery用戶界面不支持選擇的事件了。

該代碼可以使用新版本的工作：

$('.selector').tabs({ 
        activate: function(event ,ui){ 
         //console.log(event); 
         console.log(ui.newTab.index()); 
        } 
});

來源

2013-03-15 14:27:51 peter

這對jQuery 1.9.x有效。正是我需要的感謝！ – roberthuttinger

你是一個救星，謝謝！ –

使用'beforeActivate'作爲替換。看到文檔http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-event-renamed-to-beforeactivate – wal

這篇文章展示了一個完整的工作HTML文件作爲觸發代碼被點擊選項卡時要運行的一個例子。 .on（）方法現在是jQuery建議您處理事件的方式。

jQuery development history

要當用戶單擊選項卡可以通過給列表元素的ID來完成一些事情發生。

<li id="list">

然後參考id。

$("#list").on("click", function() { 
alert("Tab Clicked!"); 
});

請確保您使用的是當前版本的jQuery API。引用從谷歌jQuery的API，你可以在這裏得到的鏈接：

https://developers.google.com/speed/libraries/devguide#jquery

這裏是一個標籤頁中點擊水平製表1時觸發警報的一個完整的工作拷貝。

<!-- This HTML doc is modified from an example by: --> 
<!-- http://keith-wood.name/uiTabs.html#tabs-nested --> 

<head> 
<meta charset="utf-8"> 
<title>TabDemo</title> 

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/south-street/jquery-ui.css"> 

<style> 
pre { 
clear: none; 
} 
div.showCode { 
margin-left: 8em; 
} 
.tabs { 
margin-top: 0.5em; 
} 
.ui-tabs { 
padding: 0.2em; 
background: url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top #F5F3E5; 
border-width: 1px; 
} 
.ui-tabs .ui-tabs-nav { 
padding-left: 0.2em; 
background: url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_gloss-wave_100_ece8da_500x100.png) repeat-x scroll 50% 50% #ECE8DA; 
border: 1px solid #D4CCB0; 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
} 
.ui-tabs-nav .ui-state-active { 
border-color: #D4CCB0; 
} 
.ui-tabs .ui-tabs-panel { 
background: transparent; 
border-width: 0px; 
} 
.ui-tabs-panel p { 
margin-top: 0em; 
} 
#minImage { 
margin-left: 6.5em; 
} 
#minImage img { 
padding: 2px; 
border: 2px solid #448844; 
vertical-align: bottom; 
} 

#tabs-nested > .ui-tabs-panel { 
padding: 0em; 
} 
#tabs-nested-left { 
position: relative; 
padding-left: 6.5em; 
} 
#tabs-nested-left .ui-tabs-nav { 
position: absolute; 
left: 0.25em; 
top: 0.25em; 
bottom: 0.25em; 
width: 6em; 
padding: 0.2em 0 0.2em 0.2em; 
} 
#tabs-nested-left .ui-tabs-nav li { 
right: 1px; 
width: 100%; 
border-right: none; 
border-bottom-width: 1px !important; 
-moz-border-radius: 4px 0px 0px 4px; 
-webkit-border-radius: 4px 0px 0px 4px; 
border-radius: 4px 0px 0px 4px; 
overflow: hidden; 
} 
#tabs-nested-left .ui-tabs-nav li.ui-tabs-selected, 
#tabs-nested-left .ui-tabs-nav li.ui-state-active { 
border-right: 1px solid transparent; 
} 
#tabs-nested-left .ui-tabs-nav li a { 
float: right; 
width: 100%; 
text-align: right; 
} 
#tabs-nested-left > div { 
height: 10em; 
overflow: auto; 
} 
</pre> 

</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> 

<script> 
    $(function() { 
    $('article.tabs').tabs(); 
    }); 
</script> 

</head> 
<body> 
<header role="banner"> 
    <h1>jQuery UI Tabs Styling</h1> 
</header> 

<section> 

<article id="tabs-nested" class="tabs"> 
<script> 
    $(document).ready(function(){ 
    $("#ForClick").on("click", function() { 
     alert("Tab Clicked!"); 
    }); 
    }); 
</script> 
<ul> 
    <li id="ForClick"><a href="#tabs-nested-1">First</a></li> 
    <li><a href="#tabs-nested-2">Second</a></li> 
    <li><a href="#tabs-nested-3">Third</a></li> 
</ul> 
<div id="tabs-nested-1"> 
    <article id="tabs-nested-left" class="tabs"> 
     <ul> 
      <li><a href="#tabs-nested-left-1">First</a></li> 
      <li><a href="#tabs-nested-left-2">Second</a></li> 
      <li><a href="#tabs-nested-left-3">Third</a></li> 
     </ul> 
     <div id="tabs-nested-left-1"> 
      <p>Nested tabs, horizontal then vertical.</p> 


<form action="/sign" method="post"> 
    <div><textarea name="content" rows="5" cols="100"></textarea></div> 
    <div><input type="submit" value="Sign Guestbook"></div> 
</form> 
     </div> 
     <div id="tabs-nested-left-2"> 
      <p>Nested Left Two</p> 
     </div> 
     <div id="tabs-nested-left-3"> 
      <p>Nested Left Three</p> 
     </div> 
    </article> 
</div> 
<div id="tabs-nested-2"> 
    <p>Tab Two Main</p> 
</div> 
<div id="tabs-nested-3"> 
    <p>Tab Three Main</p> 
</div> 
</article> 

</section> 

</body> 
</html>

來源

2013-11-27 00:23:22

在後來的JQuery版本中，他們將功能從select改爲activate。 http://api.jqueryui.com/tabs/#event-activate

來源

2014-05-13 19:38:45

簡單：

$("#tabs_div").tabs(); 
$("#tabs_div").on("click", "a.tab_a", function(){ 
    console.log("selected tab id: " + $(this).attr("href")); 
    console.log("selected tab name: " + $(this).find("span").text()); 
});

但你必須類的名稱添加到您的錨名爲「tab_a」：

<div id="tabs"> 
<UL> 
    <LI><A class="tab_a" href="#fragment-1"><SPAN>Tab1</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-2"><SPAN>Tab2</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-3"><SPAN>Tab3</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-4"><SPAN>Tab4</SPAN></A></LI> 
</UL> 

<DIV id=fragment-1> 
<UL> 
    <LI><A class="tab_a" href="#fragment-1a"><SPAN>Sub-Tab1</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-1b"><SPAN>Sub-Tab2</SPAN></A></LI> 
    <LI><A class="tab_a" href="#fragment-1c"><SPAN>Sub-Tab3</SPAN></A></LI> 
</UL> 
</DIV> 
. 
. 
</DIV>

來源

2014-11-19 20:23:03 msoliman

只需使用上點擊事件顯示選項卡。

$(document).on('shown.bs.tab', 'a[href="#tab"]', function(){ 
});

來源

2018-01-03 06:18:20

jQuery - 陷印選項卡選擇事件

回答

相關問題