-1

我正在使用 jquery 实现选项卡并且不想使用 jquery UI。如何找到我点击了哪个标签？

这是我的标签结构

<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>`
4

1 回答 1

2

每当单击一个选项卡时，您可能希望添加某种类，并将一个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-01T17:04:47.557 回答