jquery - 将变量放入 .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')+);
}

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

您缺少=name 属性，您应该将值附在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'));

2 回答 2