Twitter Bootstrap event.relatedTarget删除类?

问题描述

这应该很简单，但是不起作用.

This should be fairly simple, but somehow not working.

我正在尝试通过引导选项卡事件来更改列表组的活动类别.

I am trying to change the active class of list groups upon click with the help of bootstrap tab events.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $(e.target).addClass('active'); // activated tab
            $(e.relatedTarget).removeClass('active'); // previous tab
            //alert ($(e.relatedTarget).attr('href'));
        });

我能够向e.target添加类，但是e.relatedTarget无法正常工作.有什么帮助吗?

I am able to add class to e.target but e.relatedTarget is not working. Any help?

<div class="list-group" id="MasterPageTabs">
     <a href="#lv" class="list-group-item active" data-toggle="tab">Language Variations</a>
     <a href="#hm" class="list-group-item" data-toggle="tab">Hotel Master</a>
     <a href="#gm" class="list-group-item" data-toggle="tab">Generics Master</a>
</div>

您可以参考，我没有使用默认的ul li选项卡，而是使用了带有js的bootstrap 3列表组.

As you can refer, I am not using the default ul li structure for tabs, instead i am using the bootstrap 3 list groups with js for tabs.

推荐答案

更新，因为注释中的代码显示(a)ul用于选择元素.

update as the code from your comment show the (a) ul is used to select the elements.

您可以尝试扩展/覆盖选项卡插件的show功能.像这样:

You could try to extend / overwrite the show function of the tab plugin. Something like:

            <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
            <script src="bootstrap3/bootstrap-3.0.0-wip/dist/js/bootstrap.min.js"></script>

        <script>
          $.fn.tab.Constructor.prototype.show = function () {
            var $this    = this.element

            selector = $this.attr('href')
            selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7

            var previous = $('.list-group').find('.active:last')[0]
            var e        = $.Event('show.bs.tab', {
              relatedTarget: previous
            })

            $this.trigger(e)

            if (e.isDefaultPrevented()) return

            var $target = $(selector)


            this.activate($target, $target.parent(), function () {
              $this.trigger({
                type: 'shown.bs.tab'
              , relatedTarget: previous
              })
            })
          } 


        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                    $(e.target).addClass('active'); // activated tab
                    console.log(e.relatedTarget);
                    $(e.relatedTarget).removeClass('active'); // previous tab            
                });
        </script>

See: https://developer.mozilla.org/en-US/docs/Web/API/event.relatedTarget

这篇关于Twitter Bootstrap event.relatedTarget删除类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！