Question

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

例如，当有人访问example.com时，它将.show（）example.com内容和.hide（）内容的所有其他7“页面”。然后，如果用户说使用example.com/#about-us的url跳转链接点击“菜单”项，则会显示.hide（）example.com内容并保持所有其他内容仍然隐藏，但是母鸡。 show（）example.com/#about-us content。

因此，点击任何新的跳转（菜单）链接，整个网站保持不变，唯一改变的是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或其他什么不好吗？

Answer 1

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

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

  var id = $(this).attr('id');
  $("#" + id + "_content").show();
});

Answer 2

我更喜欢在这里使用类而不是ID。对你指定的所有div元素都有一个类'jump-class'。 #jumplink1，＃jumplink2，＃jumplink3等等......

并使用以下功能。

jQuery('.jump-class').on('click', function(){
 jQuery(".jumplinks").hide();
 jQuery(this).show();
});

Answer 3

单击链接时，使用

抓取href属性

.attr('href')

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

$($(this).attr('href')).show().siblings().hide()

更简单的方法来为菜单项编码多个.hide（）。show（）jquery

3 个答案: