使用jQuery隐藏和显示内容

时间：2017-05-18 10:28:45

标签： javascript jquery html css

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

对于那些建议我使用.show（）和.hide（）的人，我感谢你的帮助，但我不认为这种方法最适合我，因为我需要为元素添加一个类，所以我可以在以后制作动画。感谢

＆＃13;
＆＃13; 
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');
  });

});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

5 个答案:

答案 0 :(得分：2)

我做了什么并建议做什么：

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的元素添加课程（＆＃39;隐藏＆＃39;）。然后它将从div中删除具有与目标匹配的id的类（$('#'+ $(this).data('target'))的console.log应该导致$('#why_us') - 如果单击了why_us链接

数据是一个可以附加到元素的属性，data- * - *可以是你想要的任何东西，但更有意义的是把它称为相关的东西。调用.data（）将获得元素上所有可用数据标记的数组，执行.data（＆＃39; string＆＃39;）将获得与数据字符串匹配的数据元素。

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

答案 1 :(得分：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>

答案 2 :(得分：0)

使用jquery show hide函数而不是addClass。当您将hide类添加到已添加的show元素时，display block将覆盖display none。而是使用它。

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();
});

答案 3 :(得分：0)

您的问题是您永远不会删除该类，因此一旦您点击链接，它就会同时包含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();
});

答案 4 :(得分：0)

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

此外，更好的方法是使用jquery hide和show functions。

脚本更改为：

<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>
相关问题
最新问题