0

我正在建立一个内容不多的网站。所以我只有一个真实的 url，即 example.com。然后我有其他 7 个“页面”的 7 个跳转链接。

例如，当有人访问 example.com 时，它将 .show() example.com 内容，并 .hide() 所有其他 7 个“页面”内容。然后，如果用户说单击带有 example.com/#about-us 的 url 跳转链接的“菜单”项，它将 .hide() example.com 内容并保持所有其他内容仍然隐藏，但 hen 。 show() example.com/#about-us 内容。

因此，在单击任何新的跳转（菜单）链接时，整个网站都保持不变，唯一改变的是 div 内容区域。

我有看起来像这样的 jquery

$('#jumplink1').click(function(){
    $('.jumplinks').hide();
    $('#jumplink1').show();
});

$('#jumplink2').click(function(){
    $('.jumplinks').hide();
    $('#jumplink2').show();
});

$('#jumplink3').click(function(){
    $('.jumplinks').hide();
    $('#jumplink3').show();
});

等等......有没有更简单的方法来编写这个jquery？

另外，如果我可能会问，使用这种类型的网站结构有什么负面影响？我知道最大的好处是它第一次加载几乎所有东西，所以当用户点击一个新的“菜单”链接时，它会立即发生。但这对 SEO 或其他任何事情都不利吗？

4

3 回答 3

1

假设您有带有类jumplinks和唯一 id的链接（jumplinks），('link1', 'link2', ...)并且网站上的内容被分组在具有类的容器中，该类content的 id 类似于其中一个 jumplinks 但带有 postfix _content ('link1_content', 'link2_content', ...)。如果您没有这样的设置，您应该明确考虑如何设置并在此处向我们提供有关它的信息。
使用此设置，您将知道哪个链接应该显示哪些内容。
显示代码如下：

$('.jumplinks').click(function(){
  $('.content').hide();

  var id = $(this).attr('id');
  $("#" + id + "_content").show();
});
于 2013-06-02T13:58:34.847 回答
0

我更喜欢在这里使用类而不是 ID。为您指定的所有 div 元素设置一个类“跳转类”。#jumplink1、#jumplink2、#jumplink3 等等……

并使用以下功能。

jQuery('.jump-class').on('click', function(){
 jQuery(".jumplinks").hide();
 jQuery(this).show();
});
于 2013-06-02T13:58:12.303 回答
0

当你点击一个链接时，抓住 href 属性

.attr('href')

然后你有你想显示的 div 的 ID 并假设这些部分都是你可以做的兄弟姐妹：

$($(this).attr('href')).show().siblings().hide()
于 2013-06-02T14:03:17.650 回答