单击jQuery显示和隐藏

我有3个锚定标签，点击我想在页面下方显示一个div。然后我想隐藏当前的div，如果单击了另一个锚定标记，它会显示在页面的更下方。到目前为止，我的代码如下所示：

$(document).ready(function () {
$('.text-show-1').on('click', function (e) {
    e.preventDefault();
    $('.container-show-1').removeClass('hide');
});

$("button").click(function(){ $("div").hide(1000); });

text-show-1是单击的内容，container-show-1是单击时显示的内容

我在语句中尝试了我自己的if语句，结果是这样的-但这不起作用

$(document).ready(function () {
$('.text-show-1').on('click', function (e) {
    e.preventDefault();
    $('.container-show-1').removeClass('hide');
    if ($('.text-show-2').on('click', function () {
            $('.container-show-1').addClass('hide');
        }))
    if else($('.text-show-3').on('click', function () {
            $('.container-show-1').addClass('hide');
        }))
});

任何帮助都将不胜感激。 干杯

如果使用jQuery

要隐藏元素，请使用$.container-show-1.hide

---

不确定这是否是您期望看到的

试试这样的方法：

$(document).ready(function () {
$('.text-show-1').on('click', function (e) {
    e.preventDefault();
    $('.container-show-1').removeClass('hide');
});

$("button").click(function(){ $("div").hide(1000); });

是否使用.show、.hide或.toggle取决于您。阅读决定

就功能而言，不要将单击事件嵌套在其他单击事件中。它们永远不会运行，因为它们只有在单击第一个元素时才可能运行，但不能同时单击两个元素-明白我的意思吗

有三个单独的单击事件，每个事件导致不同的操作：

$(document).ready(function () {

$('.text-show-1').on('click', function (e) {
    e.preventDefault();
    $('.container-show-1').show();
  });

 $('.text-show-2').on('click', function (e) {
     e.preventDefault();
     $('.container-show-1').hide();
     //should you also be showing other things?
 });

  $('.text-show-3').on('click', function (e) {
    e.preventDefault();
     $('.container-show-1').hide();
 });

});

---

通过为类似的元素提供一个公共类和/或数据属性，这样您就可以一次选择所有元素并分配一个通用事件处理程序，这类事情更容易管理。然后，事件处理程序只需要知道哪个div与单击的项相关。一种方法是为每个锚点提供一个数据属性，该属性指定关联div的id或类

所以也许有点像这样：

$(document).ready(function () {
$('.text-show-1').on('click', function (e) {
    e.preventDefault();
    $('.container-show-1').removeClass('hide');
});

$("button").click(function(){ $("div").hide(1000); });

$document.readyfunction{ //最初隐藏所有div： $'.associated'.addClass'hide'； //单击具有数据属性的任何锚点时： $'a[关联的数据]。单击'click'，函数e{ e、 防止违约； //隐藏当前显示的任何div： $'.associated'.addClass'hide'； //通过使用 //锚点数据属性中的值： $'associated-'+$this.attrdata associated.removeClass'hide'； }; }; .hide{display:none；} 内容一 内容二

---

Content3jQuery具有内置的隐藏和显示功能。为什么不使用它们呢？你也可以使用Toggle，我来试试，干杯，这是什么意思。请解释一下，或者更好的是，创建一个JSFIDLE/PLUNK，这样ppl就可以重现这个问题。谢谢你的帮助。干杯3点击功能