Question

我有3个选项卡，假设A，B和C.当用户点击选项卡A时，其内容必须显示，然后用户点击选项卡B先前打开的选项卡A内容应该隐藏，B的选项卡内容必须显示且相同的选项卡下进行。

此功能应适用于任何随机选择的标签。

执行此操作的任何想法？

这是我的代码：

>  jQuery('.view.view-user-info-page-mobile-view-responsive.view-display- id-block_1').hide();
         >jQuery('.view.view-display-id-block_2').hide();
> jQuery('#block-user-form').hide();


     >jQuery('#kes').toggle(function(){
     >jQuery('.view.view-display-id-block_1').show();       
     >},
     >function(){
     >jQuery('.view.view-display-id-block_1').hide();
     >});


     >jQuery('#bookmark').toggle(function(){
     >jQuery('.view.view-display-id-block_2').show();       
     >},
     >function(){
     >jQuery('.view.view-display-id-block_2').hide();
     >});

但它没有用:(

Answer 1

我创建了一个示例，我应该使用虚拟html作为例子：

它只是删除和添加类：

$（'ul.tabs li'）。click（function（）{ var tab_id = $（this）.attr（'data-tab'）;

$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');

$(this).addClass('current');
$("#"+tab_id).addClass('current');

}）

请点击here查看演示

这是我使用过的HTML：您可以在jsfiddle链接中查看完整的代码

<div class="container">

    <ul class="tabs">
        <li class="tab-link current" data-tab="tab-1">Tab One</li>
        <li class="tab-link" data-tab="tab-2">Tab Two</li>
        <li class="tab-link" data-tab="tab-3">Tab Three</li>
        <li class="tab-link" data-tab="tab-4">Tab Four</li>
    </ul>

    <div id="tab-1" class="tab-content current">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
    <div id="tab-2" class="tab-content">
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div id="tab-3" class="tab-content">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <div id="tab-4" class="tab-content">
        Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>

</div>

我想在点击下一个标签时隐藏以前打开的标签的标签内容？

1 个答案: