jQuery切换隐藏/显示div;如何防止再次点击同一个锚时隐藏div

kh212irz  于 5个月前  发布在  jQuery
关注(0)|答案(1)|浏览(97)

我有2个div,当点击锚时会切换。点击锚1;显示div 1,div 2隐藏。当第二次点击锚1时; div 1也隐藏。这不应该!我如何防止这种情况?
我尝试了if( !$(this).closest('li').hasClass('.active') ) {,但这不起作用

$('.showSingle').click(function() {

  if (!$(this).closest('li').hasClass('.active')) {

    $('.active').closest('li').removeClass('active');
    $(this).closest('li').addClass('active');
    $('.targetDiv').not('#div' + $(this).attr('target')).hide();
    $('#div' + $(this).attr('target')).toggle();

  }

});

个字符
Fiddle

ccgok5k5

ccgok5k51#

差不多了
这更简单,也更有效

$(function() {
  $('.showSingle').on('click', function() {
    const target = $(this).attr('target');
    const $li = $(this).closest('li');
    $('li.active').removeClass('active'); // remove all active 
    $li.addClass('active');
    $('.targetDiv').hide(); // hide all
    $(`#div${target}`).show();
  });
});

个字符
然而,正如评论所说,不要使用target,而应使用data-attributes,或者在我看来更好,href

$(function() {
  $nav = $('#nav').on('click', '.showSingle', function() {
    const target = $(this).attr('href');
    const $li = $(this).closest('li');
    $('li.active', $nav).removeClass('active'); // remove all active 
    $li.addClass('active');
    $('.targetDiv').hide(); // hide all
    console.log(target)
    $(target).show();
  });
});

x

a {
  text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<ul id="nav">
  <li class="active">
    <a class="showSingle" href="#div1">Show div 1</a>
  </li>
  <li>
    <a class="showSingle" href="#div2">Show div 2</a>
  </li>
</ul>

<br /><br />

<section id="div1" class="targetDiv">
  Content div 1
</section>

<section id="div2" class="targetDiv" hidden>
  Content div 2
</section>

的一种或多种
下面是一个CSS改进,因为如果从外部链接,它将显示目标div

$(function() {
  const $nav = $('#nav').on('click', '.showSingle', function() {
    const target = $(this).attr('href');
    const $li = $(this).closest('li');
    $('li.active', $nav).removeClass('active'); // remove all active 
    $li.addClass('active');
  });
  const hash = location.hash || $('.showSingle').first().attr('href');
  if (hash && hash.startsWith('#div')) {
    $activate = $nav.find(`[href="${hash}"]`);
    if ($activate.length ===1) $activate.closest('li').addClass('active');
  }  
});

x

a {
    text-decoration: none;
}

.active { background-color: green }
.targetDiv {
    display: none; /* Hide all targetDiv elements by default */
}

.targetDiv:target {
    display: block; /* Show the targetDiv if it's the target of the URL fragment */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<ul id="nav">
  <li>
    <a class="showSingle" href="#div1">Show div 1</a>
  </li>
  <li>
    <a class="showSingle" href="#div2">Show div 2</a>
  </li>
</ul>

<br /><br />

<section id="div1" class="targetDiv">
  Content div 1
</section>

<section id="div2" class="targetDiv">
  Content div 2
</section>

相关问题