jQuery导航控件

Question

我想用 jquery 显示和隐藏我网站的内容。如果我单击导航中的链接，内容应显示带有特殊 ID 的 <section>。 这是我的代码：

导航：

$(document).ready(function(){
  $("a").click(function(){
    $("section#home").css({"display":"none"});
    $("section#order").css({"display":"none"});
    $("section#projects").css({"display":"none"});
    $("section#contact").css({"display":"none"});
    $("section#about").css({"display":"none"});

    if ($(this[href="home"])){
        $("section#home").css({"display":"block"});
    } else if ($(this[href="order"])){
        $("section#order").css({"display":"block"});
    } else if ($(this[href="projects"])){
        $("section#projects").css({"display":"block"});
    } else if ($(this[href="contact"])){
        $("section#contact").css({"display":"block"});
    } else if ($(this[href="about"])){
        $("section#about").css({"display":"block"});
    }
  });
});

html 文件：

<section id="content">
                <section id="home">
                    <h1>home</h1>
                </section>
                <section id="order">
                    <h1>order</h1>
                </section>
                <section id="projects">
                    <h1>projects</h1>
                </section>
                <section id="contact">
                    <h1>contact</h1>
                </section>
                <section id="about">
                    <h1>about</h1>
                </section>
</section>

它在每个导航链接上都显示相同的页面（主页）。怎么了？ 你可以自己看Homepage

Answer 1

你的if条件语法错误，应该是$(this).is('[href="home"]')

$(document).ready(function () {
    $("a").click(function (e) {
        e.preventDefault();

        //hide all sections under #content
        $('#content > section').hide();

        //show the elemet with the given href as the id
        $('#' + $(this).attr('href')).show();

    });
});

Answer 2

您必须hide id 为content 的部分内的所有children 部分。然后只需从单击的锚标记中获取href 属性。并显示section，其 id 与单击的锚标记相同。

试试，

$(document).ready(function(){
  $("a").click(function(e){
    e.preventDefault();       
    $('#content').children('section').hide();    
    $('#' + $(this).attr('href')).show();
  });
});