Question

我正在使用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>`

Answer 1

您可能希望在点击其中一个标签时添加某种类，并将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')

如何使用jquery找到选定的选项卡？

1 个答案: