Question

我正在自学jQuery，并使自己成为带Bootstrap的标签容器。

我正在使用一个按钮组作为我的'容器'的标签（实际上只有4个面板），并将其中一个按钮设置为切换，我需要使用data-toggle="button"属性，但我是无法删除属性或将该属性设置为活动时将其提供给新按钮。目前，最初设置为切换的按钮保持这种状态。我的控制台没有错误。

这是我的HTML：

<div class="panel-set">

    <div class="tabs btn-group" role="group" aria-label="...">
      <button rel="panel1" type="button" class="tab-btn active btn btn-default" data-toggle="button">Tab 1</button>
      <button rel="panel2" type="button" class="tab-btn btn btn-default" data-toggle="">Tab 2</button>
      <button rel="panel3" type="button" class="tab-btn btn btn-default" data-toggle="">Tab 3</button>
      <button rel="panel4" type="button" class="tab-btn btn btn-default" data-toggle="">Tab 4</button>
    </div>

    <div id="panel1" class="panel active panel-primary">
    ...
    ...
</div>

这是我的javascript：

$(function() {

    $('.panel-set .tabs .tab-btn').on('click', function(){

        //Remove toggle and add to newly active button
        $('.panel-set .tabs .tab-btn.active').removeAttr('data-toggle');
        $('this').attr('data-toggle', 'button');

        //Figure out panel to show
        var panelToShow = $(this).attr('rel');

        //Hide current panel
        $('.panel-set .panel.active').hide( function(){

            $(this).removeClass('active');

            $('#'+panelToShow).show( function(){

                $(this).addClass('active');

            });
        });
    });
});

Answer 1

我不知道你想要实现什么，但我认为data-toggle =“button”会自动添加活动类，因为我用你的代码运行了一些测试，我最终得到了这个

$(function() {

    $('.panel-set .tabs .tab-btn').on('click', function(){

    //Remove toggle and add to newly active button, we loop through each button and then we remove the data-toggle and the active class in case it has something
    $(".tab-btn").each(function(){
        $(this).removeAttr("data-toggle");
        $(this).removeClass("active");
    });

    $(this).attr('data-toggle', 'button');

    //Figure out panel to show
    var panelToShow = $(this).attr('rel');

    //Hide current panel
    $('.panel-set .panel.active').hide( function(){

        $(this).removeClass('active');

        $('#'+panelToShow).show( function(){

            $(this).addClass('active');

            });
        });
    });
});

它就像一个标签面板一样工作。我不知道那是不是你想要的

使用jQuery添加和删除属性

1 个答案: