Javascript 带有内部链接的DOM菜单-语法问题？

我正试图为我的DOM课程（初学者）完成这个小项目。我想我的语法错了。基本上，我们要创建一个带有内部导航的1页网站。单击菜单项后，其他内容将隐藏，仅显示单击的内容。很简单，但我似乎无法使用ID的语法

这是我的。谢谢

$（文档）.ready（函数（）{
$（'#cats'）。单击（函数（）{
$（#content1'）。show（200）；
$（'content2'，'content3'，'content4'）。隐藏（'fast'）；
});
$（“#食物”）。单击（函数（）{
$（#content2'）。show（200）；
$（'content1'，'content3'，'content4'）。隐藏（'fast'）；
});
$（“#时尚”）。单击（函数（）{
$（#content3'）。show（200）；
$（'content1'，'content2'，'content4'）。隐藏（'fast'）；
});
$（“#动物”）。单击（函数（）{
$（#content4'）。show（200）；
$（'content1'，'content2'，'content3'）。隐藏（'fast'）；
});
});
*{
利润率：0；
填充：0；
}
身体{
边际上限：0px；
边缘底部：0px；
左边距：0px；
右边距：0px；
字体系列：无衬线；
字体大小：14px；
}
导航{
宽度：100%；
高度：40px；
位置：固定；
背景颜色：银色；
颜色：#FFFFFF；
文本对齐：居中；
字号：中等；
填充顶部：30px；
垫底：10px；
}
#内容1{
高度：500px；
文本对齐：居中；
颜色：#000000；
填充顶部：80px；
}
#内容2{
高度：500px；
文本对齐：居中；
颜色：#000000；
}
#内容3{
高度：500px；
文本对齐：居中；
颜色：#000000；
}
#内容4{
高度：500px；
文本对齐：居中；
颜色：#000000；
}
a{
颜色：#ffffff；
文字装饰：无；
}
a:参观了{
颜色：黑色；
}
a:悬停{
颜色：红色；
}
img{
填充：30px；
边界半径：100%；
}
部分{
宽度：1000px；
填充顶部：30px；
左边距：150像素；
}
ulli{
显示：内联块；
列表样式：无；
}








维瓦姆斯·弗林蒂利亚·波特提托·胡斯托，ac瓦里乌斯·内克·特里斯蒂克a。伊卡利斯·奥古斯是一个伟大的预言家。在《真理经》一书中，两位封建君主的名字是奥迪奥·维勒·托托·廷西登（odio vel tortor tincidunt）。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。整型蜗壳id orci et scelerisque。没有一只猫是一只狮子。这是一个不平等的时刻，一个不平等的时刻。这是欧盟的一项公共事业。无便利。维瓦摩斯·欧维拉·图尔皮斯和达皮布斯·埃尼姆

Lorem ipsum dolor sit amet，是一位杰出的献身者。但索达尔精英坐在阿梅特·尼布·乌尔特里斯诅咒我们。发酵液、枕叶、颈叶。大口库拉比图尔·尼布·努克（Curabitur maximus nibh nunc），欧盟公共交通id。每辆康努比亚诺斯特拉轿车，每辆希梅纳奥斯轿车，都有一个社会性的塔西蒂（taciti Sociasqu）和一个扭矩等级。奎斯克·埃利芬德，威尼斯人的放纵自由，巨大的侵权行为，维韦拉的本意，是对我们的承诺。发酵液中的无胎盘脓。整型坐式飞机

Lorem ipsum dolor sit amet，是一位杰出的献身者。但索达尔精英坐在阿梅特·尼布·乌尔特里斯诅咒我们。发酵液、枕叶、颈叶。大口库拉比图尔·尼布·努克（Curabitur maximus nibh nunc），欧盟公共交通id。每辆康努比亚诺斯特拉轿车，每辆希梅纳奥斯轿车，都有一个社会性的塔西蒂（taciti Sociasqu）和一个扭矩等级。奎斯克·埃利芬德，威尼斯人的放纵自由，巨大的侵权行为，维韦拉的本意，是对我们的承诺。发酵液中的无胎盘脓。整型坐式飞机


维瓦姆斯·弗林蒂利亚·波特提托·胡斯托，ac瓦里乌斯·内克·特里斯蒂克a。伊卡利斯·奥古斯是一个伟大的预言家。在《真理经》一书中，两位封建君主的名字是奥迪奥·维勒·托托·廷西登（odio vel tortor tincidunt）。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。整型蜗壳id orci et scelerisque。没有一只猫是一只狮子。这是一个不平等的时刻，一个不平等的时刻。这是欧盟的一项公共事业。无便利。维瓦摩斯·欧维拉·图尔皮斯和达皮布斯·埃尼姆

您应该在同一个引号中使用逗号分隔的选择器，其使用方式相当于向jQuery对象传递附加参数，而不是选择器

换句话说，它应该是：
$（'content1，'content3，'content4'）。hide（'fast'）而不是
$（“#content1”、“#content3”、“#content4”）。隐藏（'fast'）


$（文档）.ready（函数（）{
$（'#cats'）。单击（函数（）{
$（#content1'）。show（200）；
$（'content2，'content3，'content4'）。隐藏（'fast'）；
});
$（“#食物”）。单击（函数（）{
$（#content2'）。show（200）；
$（'content1'，'content3'，'content4'）。隐藏（'fast'）；
});
$（“#时尚”）。单击（函数（）{
$（#content3'）。show（200）；
$（'content1，'content2，'content4'）。隐藏（'fast'）；
});
$（“#动物”）。单击（函数（）{
$（#content4'）。show（200）；
$（'content1，'content2，'content3'）。隐藏（'fast'）；
});
});
*{
利润率：0；
填充：0；
}
身体{
边际上限：0px；
边缘底部：0px；
左边距：0px；
右边距：0px；
字体系列：无衬线；
字体大小：14px；
}
导航{
宽度：100%；
高度：40px；
位置：固定；
背景颜色：银色；
颜色：#FFFFFF；
文本对齐：居中；
字号：中等；
填充顶部：30px；
垫底：10px；
}
#内容1{
高度：500px；
文本对齐：居中；
颜色：#000000；
填充顶部：80px；
}
#内容2{
高度：500px；
文本对齐：居中；
颜色：#000000；
}
#内容3{
高度：500px；
文本对齐：居中；
颜色：#000000；
}
#内容4{
高度：500px；
文本对齐：居中；
颜色：#000000；
}
a{
颜色：#ffffff；
文字装饰：无；
}
a:参观了{
颜色：黑色；
}
a:悬停{
颜色：红色；
}
img{
填充：30px；
边界半径：100%；
}
部分{
宽度：1000px；
填充顶部：30px；
左边距：150像素；
}
ulli{
显示：内联块；
列表样式：无；
}




$(document).ready(function () {
    $('#menu li a').click(function () {
        var href = $(this).attr("href");
        $(href)
            .show(200)
            .siblings().hide('fast');
        return false;

    });
});

<nav id="menu">
    <ul>
        <li id="cats"><a href="#content1">Cats</a>
        </li>
        <li id="food"><a href="#content2">Food</a>
        </li>
        <li id="fashion"><a href="#content3">Fashion</a>
        </li>
        <li id="animals"><a href="#content4">Animals</a>
        </li>
    </ul>
</nav>
<div class="contents">
    <section id="content1">
        ...
    </section>
    <section id="content2">
        ...
    </section>
    <section id="content3">
        ...
    </section>
    <section id="content4">
       ...
    </section>
</div>