0

コンテンツの少ないウェブサイトを構築しています。したがって、example.com という実際の URL は 1 つしかありません。次に、他の 7 つの「ページ」への 7 つのジャンプ リンクがあります。

たとえば、誰かが example.com にアクセスすると、example.com のコンテンツが .show() され、コンテンツの他の 7 つの「ページ」がすべて .hide() されます。次に、ユーザーが example.com/#about-us の URL ジャンプ リンクを含む「メニュー」項目をクリックすると、example.com のコンテンツが .hide() され、他のすべてのコンテンツは非表示のままになりますが、 hen . show() example.com/#about-us コンテンツ。

したがって、Web サイト全体は、クリックされた新しいジャンプ (メニュー) リンクで同じままであり、変更されるのは div コンテンツ領域だけです。

私はこのようなjqueryを持っています

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

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

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

など....このjqueryを書く簡単な方法はありますか?

また、このタイプの Web サイト構造を使用することのマイナス面は何ですか? 大きな利点は、実質的にすべてを最初にロードすることです。そのため、ユーザーが新しい「メニュー」リンクをクリックすると、即座にロードされます。しかし、これは SEO などにとって悪いことなのでしょうか?

4

3 に答える 3

1

jumplinksのようなクラスと一意の IDを持つリンク (ジャンプリンク) があり('link1', 'link2', ...)、サイトのコンテンツが、ジャンプリンクcontentの ID に似ているが 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

リンクをクリックすると、 href 属性を取得します

.attr('href')

次に、表示したいdivのIDを取得し、セクションがすべて兄弟であると仮定して、次のことができます：

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

ここでは、ID の代わりにクラスを使用することを好みます。指定したすべての div 要素にクラス 'jump-class' を設定します。#jumplink1、#jumplink2、#jumplink3 など...

そして、次の関数を使用します。

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