0

我正在使用这个 jQuery 脚本在页面上隐藏和显示 4 个带有 HTML 内容的 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 时，它会关闭，屏幕上什么也没有。

我需要什么：打开的 div 在点击时不能“关闭”

4

1 回答 1

0

一种确保 div 始终可见的方法是使用:visible jQuery 的选择器。我已经修改了您的代码并在您单击.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;
});

希望这可以帮助。

于 2013-05-10T03:13:48.357 回答