引导选项卡更改父背景Jquery [英] Bootstrap Tabs change parent background Jquery

问题描述

我试图找出一个更优雅的解决方案.但是到目前为止，我的jquery技能还很有限.

我想有一种更好的方法来实现下面的功能. 简而言之.我正在尝试更改点击时父级的背景.

现在，我只是添加一个类，并从其他按钮中删除其他可能的类.

相关HTML:

<div class="panel panel-widget widget-latest-posts">
                <div class="panel-heading">
                    <h3 class="widget-title">Ebenfalls lesenswert</h3>
                </div>

                <div class="panel-body">
                    <div class="btn-pref btn-group btn-group-justified btn-group" role="group" aria-label="...">
                            <div class="btn-group" role="group">
                                <button type="button" id="btn-popular-posts" class="btn btn-popular-posts" href="#tab1" data-toggle="tab"><i class="fa fa-fire"></i>
                                    <span class="hidden-xs">Beliebt</span>
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button type="button" id="btn-latest-posts" class="btn btn-latest-posts" href="#tab2" data-toggle="tab"><i class="fa fa-clock-o"></i>
                                    <span class="hidden-xs">Neu</span>
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button type="button" id="btn-popular-comments" class="btn btn-popular-comments" href="#tab3" data-toggle="tab"><i class="fa fa-commenting-o"></i>
                                    <span class="hidden-xs">Aktiv</span>
                                </button>
                            </div>
                        </div>

相关CSS:

.bpp-toggled {
    background: orange !important;
}
.blp-toggled {
    background: lime !important;
}
.bpc-toggled {
    background: purple !important;
}

jQuery

$("#btn-popular-posts").click(function() {

    $('.widget-latest-posts').addClass('bpp-toggled');
    $('.widget-latest-posts').removeClass('blp-toggled');
    $('.widget-latest-posts').removeClass('bpc-toggled');
});

$("#btn-latest-posts").click(function() {

    $('.widget-latest-posts').addClass('blp-toggled');
    $('.widget-latest-posts').removeClass('bpp-toggled');
    $('.widget-latest-posts').removeClass('bpc-toggled');
});

$("#btn-popular-comments").click(function() {

    $('.widget-latest-posts').addClass('bpc-toggled');
    $('.widget-latest-posts').removeClass('blp-toggled');
    $('.widget-latest-posts').removeClass('bpp-toggled');
});

能否请您帮我一个更好，更优雅的解决方案，或者我可以做一些研究的关键词.因为现在，鉴于我要再添加几个按钮，很难维护它.

感谢您的帮助！

我知道关于toggleClass.但这在那种情况下没有解决.因为它只是在第二次单击时删除了该类.

解决方案

这只是使用数据属性将类保存在按钮本身中.您还可以在removeClass中使用带有正则表达式的函数，以在应用新类之前删除初始的切换类.

将来添加按钮时，只需确保按钮具有正确的data-target-class属性和在CSS中设置的正确类.只要您遵循一致的命名约定，就无需对javascript进行任何更改.

 $("button[data-toggle='tab']").click(function() {
    $('.widget-latest-posts').removeClass(function (index, className) {
      return (className.match (/([a-z]{3,3})-toggled/g) || []).join(' ');
    }
  );
  $('.widget-latest-posts').addClass($(this).attr("data-toggled-class"));
}); 

 .bpp-toggled {
    background: orange !important;
}
.blp-toggled {
    background: lime !important;
}
.bpc-toggled {
    background: purple !important;
} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-widget widget-latest-posts">
<div class="panel-heading">
<h3 class="widget-title">Ebenfalls lesenswert</h3>
</div>

<div class="panel-body">
<div class="btn-pref btn-group btn-group-justified btn-group" role="group" aria-label="...">
    <div class="btn-group" role="group">
        <button type="button" id="btn-popular-posts" class="btn btn-popular-posts" href="#tab1" data-toggle="tab" data-toggled-class="bpp-toggled"><i class="fa fa-fire"></i>
            <span class="hidden-xs">Beliebt</span>
        </button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" id="btn-latest-posts" class="btn btn-latest-posts" href="#tab2" data-toggle="tab" data-toggled-class="blp-toggled"><i class="fa fa-clock-o"></i>
            <span class="hidden-xs">Neu</span>
        </button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" id="btn-popular-comments" class="btn btn-popular-comments" href="#tab3" data-toggle="tab" data-toggled-class="bpc-toggled"><i class="fa fa-commenting-o"></i>
            <span class="hidden-xs">Aktiv</span>
        </button>
    </div>
</div> 

im trying to figure out a more elegant solution. But my jquery skills are limited as of now.

I'd imagine there is a better way to achieve the function below. In few words. I am trying to change the background of the parent on click.

Right now, i just add a class and remove other possible classes from the other buttons.

Relevant HTML:

<div class="panel panel-widget widget-latest-posts">
                <div class="panel-heading">
                    <h3 class="widget-title">Ebenfalls lesenswert</h3>
                </div>

                <div class="panel-body">
                    <div class="btn-pref btn-group btn-group-justified btn-group" role="group" aria-label="...">
                            <div class="btn-group" role="group">
                                <button type="button" id="btn-popular-posts" class="btn btn-popular-posts" href="#tab1" data-toggle="tab"><i class="fa fa-fire"></i>
                                    <span class="hidden-xs">Beliebt</span>
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button type="button" id="btn-latest-posts" class="btn btn-latest-posts" href="#tab2" data-toggle="tab"><i class="fa fa-clock-o"></i>
                                    <span class="hidden-xs">Neu</span>
                                </button>
                            </div>
                            <div class="btn-group" role="group">
                                <button type="button" id="btn-popular-comments" class="btn btn-popular-comments" href="#tab3" data-toggle="tab"><i class="fa fa-commenting-o"></i>
                                    <span class="hidden-xs">Aktiv</span>
                                </button>
                            </div>
                        </div>

Relevant CSS:

.bpp-toggled {
    background: orange !important;
}
.blp-toggled {
    background: lime !important;
}
.bpc-toggled {
    background: purple !important;
}

Jquery

$("#btn-popular-posts").click(function() {

    $('.widget-latest-posts').addClass('bpp-toggled');
    $('.widget-latest-posts').removeClass('blp-toggled');
    $('.widget-latest-posts').removeClass('bpc-toggled');
});

$("#btn-latest-posts").click(function() {

    $('.widget-latest-posts').addClass('blp-toggled');
    $('.widget-latest-posts').removeClass('bpp-toggled');
    $('.widget-latest-posts').removeClass('bpc-toggled');
});

$("#btn-popular-comments").click(function() {

    $('.widget-latest-posts').addClass('bpc-toggled');
    $('.widget-latest-posts').removeClass('blp-toggled');
    $('.widget-latest-posts').removeClass('bpp-toggled');
});

Can you please help me up with a better more elegant solution or maybe keyword I could do some researches on. Because right now, it is very hard to maintain given i'll add few more buttons.

Thanks for the help!

Edit: I know about toggleClass. But that didnt work out in that case. Because it just removed the class on 2nd click.

解决方案

This simply uses data attributes to hold the class in the button itself. You can also use a function within the removeClass with a regular expression to remove the initial toggled class before applying the new one.

In the future when you add buttons, you'll only need to ensure the button has the proper data-target-class attribute and the proper class set up in your css. No changes to the javascript would be necessary as long as you followed consistent naming conventions.

$("button[data-toggle='tab']").click(function() {
    $('.widget-latest-posts').removeClass(function (index, className) {
      return (className.match (/([a-z]{3,3})-toggled/g) || []).join(' ');
    }
  );
  $('.widget-latest-posts').addClass($(this).attr("data-toggled-class"));
});

.bpp-toggled {
    background: orange !important;
}
.blp-toggled {
    background: lime !important;
}
.bpc-toggled {
    background: purple !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-widget widget-latest-posts">
<div class="panel-heading">
<h3 class="widget-title">Ebenfalls lesenswert</h3>
</div>

<div class="panel-body">
<div class="btn-pref btn-group btn-group-justified btn-group" role="group" aria-label="...">
    <div class="btn-group" role="group">
        <button type="button" id="btn-popular-posts" class="btn btn-popular-posts" href="#tab1" data-toggle="tab" data-toggled-class="bpp-toggled"><i class="fa fa-fire"></i>
            <span class="hidden-xs">Beliebt</span>
        </button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" id="btn-latest-posts" class="btn btn-latest-posts" href="#tab2" data-toggle="tab" data-toggled-class="blp-toggled"><i class="fa fa-clock-o"></i>
            <span class="hidden-xs">Neu</span>
        </button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" id="btn-popular-comments" class="btn btn-popular-comments" href="#tab3" data-toggle="tab" data-toggled-class="bpc-toggled"><i class="fa fa-commenting-o"></i>
            <span class="hidden-xs">Aktiv</span>
        </button>
    </div>
</div>

这篇关于引导选项卡更改父背景Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！