如何在单击相应菜单项时显示/隐藏一部分内容，同时隐藏所有其他内容

How to show/hide a section of content when a corresponding menu item is clicked, while hiding all other content?

本文关键字：一部分 其他 隐藏所 隐藏 单击 显示 菜单项      更新时间：2023-09-26

我试图在单击菜单项时显示一个部分的内容，同时隐藏页面上所有其他部分的内容。

这是html:

<nav>
 <ul>
  <li class="navServe">services</li>
  <li class="navContact">contact</li>
 </ul>
</nav>
<section class="services s-h">
 <h1>Contents of services section</h1>
</section>
<section class="contact s-h">
 <h1>Contents of contact section</h1>
</section>

css就像使用display none来隐藏包含内容的部分一样简单。

我一直在尝试这个jQuery:

$("nav ul li").click(function(){
$(".content").children(".s-h").css("display", "block");
$(this).siblings(".s-h").css("display", "none");
});

但是jQuery没有找到活动部分。事实上，当单击任一菜单项时，它都会显示两个部分（服务和内容）的内容。如何让jQuery找到相应菜单项的内容？

给定HTML，您可以这样做：

$("nav ul li").click(function(){
    $("section.s-h").css("display", "none");
    if ($(this).hasClass("navServe"))  $("section.services.s-h").css("display", "block");
    if ($(this).hasClass("navContact")) $("section.contact.s-h").css("display", "block");
});

随着你添加更多的部分，这将很快变得更长。为了改进它，你必须稍微更改一下HTML（很像@Ravi的建议）：

<nav>
    <ul>
        <li class="navServe" data-target="section.services.s-h">services</li>
        <li class="navContact" data-target="section.contact.s-h">contact</li>
    </ul>
</nav>
<section class="services s-h">
    <h1>Contents of services section</h1>
</section>
<section class="contact s-h">
    <h1>Contents of contact section</h1>
</section>

data-target属性可以包含指向section标记的任何CSS选择器。

然后你的脚本可以是：

<script>
$("nav ul li").click(function(){
    $("section.s-h").css("display", "none");
    $($(this).data("target")).css("display", "block");
});
</script>

点击时，通过jQuery hasClass函数检查点击了哪个导航，然后相应地显示和隐藏div。像这样：

$("nav ul li").click(function(){
 if($(this).hasClass("navServe")){
  $(".services").css("display", "block");
  $(".contact").css("display", "none");
 }else{
  $(".contact").css("display", "block");
  $(".services").css("display", "none");
 }
});

1。给您的<li>标签一个id，

<li class="navServe" id="tab1">services</li>
<li class="navContact" id="tab2">contact</li>

2。为您的部分提供id，其中的内容显示

   <section class="services s-h" id="section1">
     <h1>Contents of services section</h1>
    </section>
    <section class="contact s-h" id="section2">
     <h1>Contents of contact section</h1>
    </section>

3。将其放在script、上

$(document).ready(function() {   
        $("#tab1").click(function(e) {
            $('#section1').css({"display":"block"});
            $('#section2').css({"display":"none"});
        });
$(document).ready(function() {   
        $("#tab2").click(function(e) {
            $('#section1').css({"display":"none"});
            $('#section2').css({"display":"block"});
        });

您需要首先在nav和部分之间建立关系。在导航节点中添加一个数据目标，以指向适当的部分。

<nav>
 <ul>
  <li class="navServe" data-target=".services">services</li>
  <li class="navContact" data-target=".contact">contact</li>
 </ul>
</nav>
<section class="services s-h">
 <h1>Contents of services section</h1>
</section>
<section class="contact s-h">
 <h1>Contents of contact section</h1>
</section>

然后你可以这样做：

$("nav ul li").click(function(){
   $(".s-h").hide();
   var elem = $(this).attr("data-target");
   $(elem).show();
});

JS Fiddle

相关文章：