Question

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

这是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找到相应菜单项的内容？

Answer 1

鉴于你的HTML，你可以这样做：

invalid multibyte string 1

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

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

<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标记的任何CSS选择器。

然后你的脚本可以是：

section

Answer 2

点击检查点击哪个导航，通过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");
 }
});

Answer 3

1 。将<li>代码设为id，

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

2 。给你的部分提供内容，其中显示了内容

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

        });

Answer 4

您需要先在导航和各个部分之间建立关系。在导航节点中添加数据目标以指向相应的部分。

<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

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

4 个答案: