Question

HTML

<div class="show-content-1 hidden">
    content 1
</div>

<div class="show-content-2 hidden">
    content 2
</div>

<div class="show-content-3 hidden">
    content 3
</div>  

<div class="switch-content">
    <a id="content-1" href="#">link 1</a>
    <a id="content-2" href="#">link 2</a>
    <a id="content-3" href="#">link 3</a>
</div>

的jQuery

$('.switch-content a').on("click", function(e) {
    e.preventDefault();
    var $this = $(this),
      $id = $this.attr('id'),
      $class = '.' + $('.show-' + $id).attr('class').replace('hidden', '');

    $('.show-' + $id).removeClass('hidden');
    $('.show-' + $id).addClass('animated fadeIn');
    $('div[class*=show]').not($class).addClass('hidden');
    $('div[class*=show]').not($class).removeClass('animated fadeIn');
});

CSS

.hidden {display:none}

使用上面的代码，如果我点击链接2，内容2将显示 - 这是好的。

但是再次点击Link 2会隐藏内容2，不会显示任何内容。有没有办法防止第二次点击或继续显示内容2，无论点击链接2多少次？

Answer 1

检查内容是否包含hidden课程，如果有，请不要触摸它：

$('.switch-content a').on("click", function(e) {
    e.preventDefault();
    var $this = $(this),
      id = $this.attr('id'),
      $content = $('.show-' + id);

    if (!$content.hasClass('hidden')) return;

    $content.removeClass('hidden').addClass('animated fadeIn');
    $('div[class*=show]').not($content).addClass('hidden');
    $('div[class*=show]').not($content).removeClass('animated fadeIn');
});

http://jsfiddle.net/nrtxtufz/

Answer 2

您可以使用“数据”来阻止再次点击。

$('.switch-content a').on("click", function(e) {
    e.preventDefault();

    if ($(this).data('clicked')) return;

    var $this = $(this),
      $id = $this.attr('id'),
      $class = '.' + $('.show-' + $id).attr('class').replace('hidden', '');

    $('.show-' + $id).removeClass('hidden');
    $('.show-' + $id).addClass('animated fadeIn');
    $('div[class*=show]').not($class).addClass('hidden');
    $('div[class*=show]').not($class).removeClass('animated fadeIn');

    $(this).data('clicked', true);
});

Answer 3

我会使用jQuery对象而不是它的类，以避免任何问题：

$('.switch-content a').on("click", function(e) {
    e.preventDefault();
    var $content = $('.show-' + $(this).attr('id'));

    $content.removeClass('hidden').addClass('animated fadeIn');
    $('div[class^=show]').not($content).addClass('hidden').removeClass('animated fadeIn');
});

jQuery - 添加/删除类

3 个答案: