Question

我正在使用这个jQuery脚本隐藏和显示页面上带有HTML内容的4个div容器。

jQuery的：

$('.content-drawer').hide();
$('#tab1').show();
$('#calc').show();

$('.tab').click(function() {
var $this = $(this);
var target = $(this.rel);
$this.closest('li').addClass('active focus');
// Add the classes to the closest li of the clicked anchor

$('.tab').not($this).closest('li').removeClass('active focus');
// Remove the classes for the non-clicked items

$('.content-drawer').not(target).fadeOut();
// Slideup the other contents

target.delay(400).fadeToggle();
// Toggle the css3-mediaqueriesrrent content

if (target.is(':visible')) {
    // Only if the target is visible remove the active class
    $this.closest('li').removeClass('active');
} 
return false;
});

HTML：

<div class="content-drawer" id="tab2">
    <div class="sixcol">
       <img src="css/img/books.png" alt="">
    </div>
    <div class="sixcol last">
      <article>
           <h2>From our family to yours</h2>
           <p>Sed posuere consectetur est at lobortis. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
           <a class="button fancy" href="#">Learn More</a>
      </article>
   </div>
</div>

由于当您点击当前打开的div时，客户端会因为它关闭而在屏幕上不显示任何内容。

我需要什么：对于open div而言，点击

时不能“关闭”

Answer 1

您可以确保一个div可见的一种方法是使用:visible selector that jQuery has。我修改了您的代码，并在您点击.tab代码

时添加了此代码

$('.content-drawer').hide();
$('#tab1').show();
$('#calc').show();

$('.tab').click(function() {
   var $this = $(this);
    var target = $(this.rel);

    //Get the number of .tabs visible
    var visible = $('.tab').filter(":visible").length;
    //If only one is visible then return before preforming any actions
    if(visible === 1){
        return; 
    }

    $this.closest('li').addClass('active focus');
    // Add the classes to the closest li of the clicked anchor

    $('.tab').not($this).closest('li').removeClass('active focus');
    // Remove the classes for the non-clicked items

    $('.content-drawer').not(target).fadeOut();
    // Slideup the other contents

    target.delay(400).fadeToggle();
    // Toggle the css3-mediaqueriesrrent content

    if (target.is(':visible')) {
        // Only if the target is visible remove the active class
        $this.closest('li').removeClass('active');
    } 
    return false;
});

希望这有帮助。

需要我的jQuery选项卡在活动时才能关闭并且已经打开

1 个答案: