Question

我希望在标签布局中显示另一个div更改时更改div的显示。当标签（id：tab-flyouts）打开时，应隐藏带有id noshow的div，反之亦然。

我已经尝试检查制表符弹出窗口的可见性并相应地更改'noshow'div的可见性但是没有用。

<div class="tab-menu">
<ul>
<li><a href="#t1">Tab 1</a></li>
<li><a href="#t2">Tab 2</a></li>
<li><a href="#t3">Tab 3</a></li>
</ul>
</div>
<div class="tab-flyouts" id="tab-flyouts" style="display:none">
<div class="vc_row wpb_row vc_row-fluid">
    <div id="t1" style="display:none">
        Tab 1 content
    </div>
    <div id="t2" style="display:none">
        Tab 2 content
    </div>
    <div id="t3" style="display:none">
        Tab 3 content
    </div>
</div>
</div>
<div id="noshow">
This needs to be hidden when tabs are open
</div>

这里是标签的jquery。

$(document).ready(function() {
$('.tab-menu li > a').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    var $tabName = $(this).attr('href');
    var $tabFlyout = $('.tab-flyouts');
 $(this).toggleClass('active').closest('li').siblings().children('a').removeClass('active');

    if ($tabFlyout.is(':visible')){
        if ($this.hasClass('active')) {
            $('body').addClass('active-tab-menu');

            var $activeTab = $tabFlyout.find('div' + $tabName);
            $activeTab.siblings(':visible').fadeOut();
            $activeTab.fadeIn();
            var $h2s = $activeTab.find('.filters').siblings('h2');
            $h2s.each(function () {
                var $this = $(this);
                var $listOfLinks = $this.next('.list-of-links');
                if ($listOfLinks.is(':visible')) {
                    if (!$listOfLinks.children('li:visible').length) {
                        $this.hide();
                    } else {
                        $this.show();
                    }
                }
            });
            if (!$activeTab.find('h2:visible').length && !$activeTab.find('.no-results')) {
                $activeTab.find('.no-search-results').show();
            }
        } else{
            $('body').removeClass('active-tab-menu');

            $tabFlyout.slideUp(function () {
                $tabFlyout.children('.wrapper > div').hide();
            });
        }
    } else {
        $('body').addClass('active-tab-menu');

        var $activeTab = $tabFlyout.find('div' + $tabName);
        $activeTab.show().siblings().hide().end().end().slideDown('fast', function () {
            $('body').trigger('tab_flyout.open');
        });
    }
});
});

https://codepen.io/anon/pen/ooXdLd

Answer 1

如果您想要在所有标签打开时隐藏noshow DIV，则根据您的代码无法进行此操作，因为您始终会显示一个标签在时间，隐藏其他选项卡。

但是，如果您只想在一个标签打开时隐藏noshow DIV：

隐藏标签时添加$('noshow').show()。
并在显示任何标签时添加$('noshow').hide()。
或者，添加$('noshow').toggle()以在它们之间切换。

跟踪div的显示并相应地更改另一个div的显示

1 个答案: