Question

  <body>

<div class="container">        

    <div id="page-content" class="header-clear">

        <div id="page-content-scroll"><!--Enables this element to be scrolled --> 


            <div class="content">
                <div class="row">
                    <ul class="tabs padding-tab">
                        <div class="col-xs-4 orange-tab current text-center" data-tab="tabs-1">
                            <li class="tab-link" >Step 1</li>
                        </div>
                        <div class="col-xs-4 orange-tab text-center" data-tab="tabs-2">
                            <li class="tab-link" >Step 2</li>
                        </div>
                        <div class="col-xs-4 orange-tab text-center" data-tab="tabs-3">
                            <li class="tab-link" >Step 3</li>
                        </div>

                    </ul>
                </div>

                <div id="tabs-1" class="tab-content current">
                    <div class="tab-elements">
                        Lorem ipsum dolor sit amet
                    </div>
                </div>
                <div id="tabs-2" class="tab-content">
                    <div class="tab-elements">
                        dolore magna aliqua. Ut enim ad minim veniam, quis
                        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                </div>
                <div id="tabs-3" class="tab-content">
                    <div class="tab-elements">
                       a commodo consequat.
                    </div>
                </div>

            </div>
        </div>  
    </div>
</div>
</body>

这是JS代码

$('ul.tabs div.orange-tab').click(function(){
            var tab_id = $(this).attr('data-tab');

            $(this).parent().parent().find('ul.tabs div.orange-tab').removeClass('current');
            $(this).parent().parent().find('div.tab-content').removeClass('current');

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

我想要的是当我按下按钮（步骤2）从第一个标签页删除.tab内容，并从标签2中放入内容时，我不知道为什么但不删除当前的＆＃39;类。

Answer 1

看看我的解决方案

＆＃13;

$('ul.tabs div.orange-tab').click(function(){
            var tab_id = $(this).attr('data-tab');

            $('ul.tabs div.orange-tab').removeClass('current');
            $('div.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#"+tab_id).addClass('current');
        });

＆＃13;

div[id^="tabs"] {
    display: none;
}
div[id^="tabs"].current {
    display: block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">        

    <div id="page-content" class="header-clear">

        <div id="page-content-scroll"><!--Enables this element to be scrolled --> 


            <div class="content">
                <div class="row">
                    <ul class="tabs padding-tab">
                        <div class="col-xs-4 orange-tab current text-center" data-tab="tabs-1">
                            <li class="tab-link" >Step 1</li>
                        </div>
                        <div class="col-xs-4 orange-tab text-center" data-tab="tabs-2">
                            <li class="tab-link" >Step 2</li>
                        </div>
                        <div class="col-xs-4 orange-tab text-center" data-tab="tabs-3">
                            <li class="tab-link" >Step 3</li>
                        </div>

                    </ul>
                </div>

                <div id="tabs-1" class="tab-content current">
                    <div class="tab-elements">
                        Lorem ipsum dolor sit amet
                    </div>
                </div>
                <div id="tabs-2" class="tab-content">
                    <div class="tab-elements">
                        dolore magna aliqua. Ut enim ad minim veniam, quis
                        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                </div>
                <div id="tabs-3" class="tab-content">
                    <div class="tab-elements">
                       a commodo consequat.
                    </div>
                </div>

            </div>
        </div>  
    </div>
</div>

＆＃13;

这是另一个不需要上下文的片段，效果适用于id - s以及当.current样式未知时的条件。

＆＃13;

$('ul.tabs div.orange-tab').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('div.tab-content').hide(500);
    $("#"+tab_id).show(500);
});

＆＃13;

div[id^="tabs"] {
    display: none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">        

    <div id="page-content" class="header-clear">

        <div id="page-content-scroll"><!--Enables this element to be scrolled --> 


            <div class="content">
                <div class="row">
                    <ul class="tabs padding-tab">
                        <div class="col-xs-4 orange-tab text-center" data-tab="tabs-1">
                            <li class="tab-link" >Step 1</li>
                        </div>
                        <div class="col-xs-4 orange-tab text-center" data-tab="tabs-2">
                            <li class="tab-link" >Step 2</li>
                        </div>
                        <div class="col-xs-4 orange-tab text-center" data-tab="tabs-3">
                            <li class="tab-link" >Step 3</li>
                        </div>

                    </ul>
                </div>

                <div id="tabs-1" class="tab-content" style="display: block;">
                    <div class="tab-elements">
                        Lorem ipsum dolor sit amet
                    </div>
                </div>
                <div id="tabs-2" class="tab-content">
                    <div class="tab-elements">
                        dolore magna aliqua. Ut enim ad minim veniam, quis
                        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                </div>
                <div id="tabs-3" class="tab-content">
                    <div class="tab-elements">
                       a commodo consequat.
                    </div>
                </div>

            </div>
        </div>  
    </div>
</div>

＆＃13;

Answer 2

我找到了解决方案：
无需使用

$(this).parent().parent().find();

如果你要删除所有div上的类，那么只需使用：

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

希望这有帮助！

当我进入下一个标签页时，内容无法删除

2 个答案: