使用 jQuery 隐藏和显示内容

Question

我正在尝试根据单击的链接更改页面上的内容。我的问题是，一旦显示链接的内容，如果单击另一个链接，即使我已将其设置为在单击另一个链接时不显示，它也不会消失。 display: 块正在覆盖 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') - 如果单击了为什么_us 链接

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

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

Answer 2

使用您的实际代码，您没有正确切换 hide 和 show 类。

您可以只使用 jQuery .hide() 和 .show() 方法，而不是添加和删除类：

$(document).ready(function() {
  $('#link_one').click(function() {
    $('#about_us').hide();
    $('#why_us').hide();
    $('#our_prods').hide();
    $('#accreditations').show();
  });
  $('#link_two').click(function() {
    $('#why_us').hide();
    $('#accreditations').hide();
    $('#our_prods').hide();
    $('#about_us').show();
  });
  $('#link_three').click(function() {
    $('#about_us').hide();
    $('#our_prods').hide();
    $('#accreditations').hide();
    $('#why_us').show();
  });

});

演示：

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

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

  $('#link_three').click(function() {
    $('#about_us').hide();
    $('#our_prods').hide();
    $('#accreditations').hide();
    $('#why_us').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;
}

<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>

Answer 3

使用 jquery show hide 函数代替 addClass。当您将隐藏类添加到已添加的显示元素时，显示块将覆盖显示无。而是使用它。

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

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

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

Answer 4

您的问题是您永远不会删除该类，因此一旦您单击一个链接，它就会同时具有 hide 和 show 类。而且因为show 类在你的css 中稍后，它会覆盖hide 类。

您可以在更改末尾添加.removeClass('show')。喜欢

jQuery('#our_prods').addClass('hide').removeClass('show');

更简单的方法可能是使用show() 和hide() jQuery 方法，而不必担心交换类。

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

Answer 5

问题在于，当您尝试隐藏内容时，您现在正在删除课程节目。

另外，更好的方法是使用 jquery 的隐藏和显示功能。

脚本更改为：

<script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery('#link_one').click(function() {
        jQuery('.content').hide()
        jQuery('#accreditations').show()
      });

      jQuery('#link_two').click(function() {
            jQuery('.content').hide()
        jQuery('#our_prods').show()
      });

      jQuery('#link_three').click(function() {
            jQuery('.content').hide()
        jQuery('#why_us').show()
      });

});
</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" class="content show">
  <p>About Us Page - to be displayed by default</p>
</div>

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

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

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

更新后的 CSS：

<style type="text/css">

    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;
}
.content{
    display: none;
}
.show{
    display: block;
}
</style>