将变量放入.load

Question

我有几个部分，我想使用jQuery加载每个部分， 当在导航中选择每个部分时，我想隐藏页面中的一些静态元素，隐藏其他部分（如果之前已经选择并加载它们）并显示当前部分， 我可以通过为每个导航项编写点击事件来尝试淡出和淡化这些元素，但我怎么能在短时间内完成呢？

假设我有：#background #elem1 #elem2
如果点击了我的任何导航链接，我想隐藏这个3。

然后我有：#section1 #section2 #section3 #section4 ... 它们位于名为 content.html 的单个文件中 还有一个灯箱，让我们说#light

因此，假设当用户点击#nav-section1之类的链接时，我希望完成以下操作：

淡出：#background #elem1 #elem2 淡出：#section2 #section3 #section4 ... 淡入：#light 淡入：#section1

我的导航如下：

<a class="navigation" id="nav-section1" name section1">Section1</a>
<a class="navigation" id="nav-section2" name section2">Section2</a>
...

jQuery应该是这样的： （要点击的项目名称放在.load：content.html#name）

$("a.navigation").click(function(event){
    $("#light").fadeIn("slow");
    $("#light").load("content.html #"+$(this).attr('name')+);
}

我知道这是错的，并没有做我想要的所有事情，所以有人可以请你纠正吗？

Answer 1

您需要通过删除末尾的+来修复语法错误。

$("a.navigation").click(function(event) {
    $("#light").fadeIn("slow");
    $("#light").load("content.html #" + $(this).attr('name'));
}

除此之外，您的HTML目前无效。它应该是这样的：

<a class="navigation" id="nav-section1" name="section1">Section1</a>

但是，使用name这并不合适。请改为使用data属性：

<a class="navigation" id="nav-section1" data-name="section1">Section1</a>

并像这样更改JS：

$("#light").load("content.html #" + $(this).data('name'));

Answer 2

您在姓名属性后缺少=，您应该将该值括在quotes上。

更改

<a class="navigation" id="nav-section1" name section1">Section1</a>
<a class="navigation" id="nav-section2" name section2">Section2</a>

要

<a class="navigation" id="nav-section1" name="section1">Section1</a>
<a class="navigation" id="nav-section2" name="section2">Section2</a>

+

末尾有额外的$(this).attr('name')个符号

更改

$("#light").load("content.html #"+$(this).attr('name')+);

到

$("#light").load("content.html #"+$(this).attr('name'));