javascript - 使用 jQuery 隐藏和显示内容

Question

我正在尝试根据点击的链接更改页面上的内容。我的问题是，一旦显示链接的内容，如果单击另一个链接，即使我已将其设置为在单击另一个链接时不显示，它也不会消失。 display: block 正在覆盖 display: none。

对于那些建议我使用 .show() 和 .hide() 的人，我感谢你的帮助，但我不认为这种方法对我来说是最好的，因为我需要向元素添加一个类以便我可以制作动画稍后。谢谢

jQuery(document).ready(function() {
  jQuery('#link_one').click(function() {
    jQuery('#about_us').addClass('hide');
    jQuery('#why_us').addClass('hide');
    jQuery('#our_prods').addClass('hide');
    jQuery('#accreditations').addClass('show');
  });

  jQuery('#link_two').click(function() {
    jQuery('#why_us').addClass('hide');
    jQuery('#accreditations').addClass('hide');
    jQuery('#our_prods').addClass('hide');
    jQuery('#about_us').addClass('show');
  });

  jQuery('#link_three').click(function() {
    jQuery('#about_us').addClass('hide');
    jQuery('#our_prods').addClass('hide');
    jQuery('#accreditations').addClass('hide');
    jQuery('#why_us').addClass('show');
  });

});

nav {
  width: 100%;
  text-align: center;
}

nav ul {
  list-style-type: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  font-size: 40px;
  margin: 0 10px;
}

p {
  font-size: 30px;
  font-weight: bold;
}

div {
  width: 100%;
  text-align: center;
}

.hide {
  display: none;
}

.show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a id="link_one" href="#">link 1</a></li>
    <li><a id="link_two" href="#">link 2</a></li>
    <li><a id="link_three" href="#">link 4</a></li>
  </ul>
</nav>

<div id="about_us">
  <p>About Us Page - to be displayed by default</p>
</div>

<div id="accreditations">
  <p>Accreditations Page Content - Link 1</p>
</div>

<div id="our_prods">
  <p>Our products - Link 2</p>
</div>

<div id="why_us">
  <p>Why us content - link 3</p>
</div>

https://codepen.io/Reece_Dev/pen/gWdEoJ

Answer 1

我会做什么和推荐做什么:

HTML

<ul>
    <li><a href="#" id="link_1" class="link" data-target="accreditations">Link 1</a></li>
    <li><a href="#" id="link_2" class="link" data-target="our_prods">Link 2</a></li>
    <li><a href="#" id="link_3" class="link" data-target="why_us">Link 3</a></li>
</ul>

<div class="pageContainer" id="uniqueID">
    <!-- content -->
</div>

jQuery

$(document).ready(function()
{
    $('.link').on('click', function()
    {
        $('.pageContainer').addClass('hide');
        $('#'+ $(this).data('target')).removeClass('hide');
    });
});

这将做的是，当单击具有类 .link 的任何内容时，向具有类 .pageContainer 的所有元素添加一个类(“隐藏”)。然后它将从 div 中删除具有与目标匹配的 id 的类( $('#'+ $(this).data('target')) 的 console.log 应该结果在 $('#why_us') - 如果 why_us 链接被点击

data 是您可以附加到元素的属性，data-* - * 可以是您想要的任何内容，但将其称为相关的东西更有意义。调用 .data() 将获得元素上所有可用数据标签的数组，执行 .data('string') 将获得与数据字符串匹配的数据元素。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/data- *