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标识为children的部分内的所有content部分。然后从被点击的锚标记中获取href属性。并显示section，其ID与点击的锚标记相同。

尝试，

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

jQuery导航控件

2 个答案: