如何使用jquery查找選定的選項卡？

-1

我正在實現使用jquery的標籤，並不想使用jQuery UI。如何找到我點擊的標籤？如何使用jquery查找選定的選項卡？

這裏是我的標籤結構

<div class="tabs"> 
    <!-- Tabs starts --> 
    <div class="tabview-content"> 
     <div class="card-panel-selector"> 
      <div class="-card-panel-selector-content"> 
       <div class="card-panel-selection card-panel-current"> 
        <div class="panel- label"><span>XYZ</span> 
        </div> 
       </div> 
       <div class="card-panel-selection"> 
        <div class="panel-label"><span>ABCD</span> 
        </div> 
       </div> 
       <div class="card-panel-selection card-panel-selection-account"> 
        <div class="panel-label"><span>PQRS</span> 
        </div> 
       </div> 
       <div class="card-panel-selection"> 
        <div class="panel-label"><span>ASDF</span> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>`

來源

2013-08-01 krishyalla

Hello krishyalla，[jQueryUI選項卡插件]（http://jqueryui.com/tabs/）使用一個UL列表作爲菜單和多個其他div來保存選項卡內容（您可以在[Page檢查員（https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector））。您的HTML結構可能無法正常工作。下面是一個例子，它可能是這樣的：http://jsfiddle.net/VcVpM/5/嘗試用你自己的CSS更新小提琴和你的問題，也許有人可以幫助你更好。祝你好運！ – Stano

你可能會想添加某種類的，只要用戶點擊您的標籤之一，並添加一個selected類特定標籤，如下圖所示：

//When a tab is clicked' 
$('.tab').click(function(){ 
    //Remove all existing selections 
    $('.tab').removeClass('selected'); 
    //Select the current tab 
    $(this).addClass('selected'); 

    //Logic to show/hide all the tabs except for the selected ones 
});

如果採取了與上述類似的方法，則可以始終訪問通過以下選擇器選擇的選項卡：

//Grabs the currently selected tab 
$('.tab.selected')

編輯：更新了一個更具體的答案OP的情況

看來，您使用的類card-panel-current表明，選擇該選項卡，這樣你就可以相應地修改上面的例子：

//Your panel was selected 
$('.card-panel-selection').click(function(){ 
    //Unselect all previous panels 
    $('.card-panel-selection').removeClass('card-panel-current'); 
    //Select the current one 
    $(this).addClass('card-panel-current'); 

    //Logic to show/hide contents here 
});

抓住當前選項卡可以做類似於以上，以及：

$('.card-panel-selection.card-panel-current')

或

$('.card-panel-current')

來源

2013-08-01 17:04:47

@falsetru它沒有工作...所選班級應該在卡面板當前右... – krishyalla

$（'。card-panel-selection .selected'）。click（function（）{ \t \t $（ '卡片面板選擇。 '）removeClass（' 選擇 '）;。 \t \t $（本）.addClass（' 選擇'）; \t \t }）; – krishyalla

如何使用jquery查找選定的選項卡？

回答

相關問題