0

私のサイトでモバイル CSS を使用している場合、ナビゲーションが長くなりすぎて、ユーザーが下にスクロールしないとコンテンツが表示されません。

次に、ナビゲーション urs を div にリンクするように変更して、コンテンツに直接ジャンプするようにします

例:

@media のみの画面と (最小幅: 480px) が使用されている場合、ナビゲーション リンクには URL

site1.php#コンテンツ

site2.php#コンテンツ

site3.php#コンテンツ

@media のみの画面と (最小幅: 992px) が使用されている場合

site1.php

site2.php

site3.php

どうすればいいですか？PHP または jQuery ?

私はこのコードを見ています：

$("a[href^='http://stackoverflow.com']")
   .each(function()
   { 
      this.href = this.href.replace(/^http:\/\/beta\.stackoverflow\.com/, 
         "http://stackoverflow.com");
   });

これを何らかの方法で変更して、私の場合に機能するようにすることはできますか?

4

2 に答える 2

1

ページをスクロールしたい要素の名前を設定している場合は、それを行うことができます。

$(function(){
    var hash = (window.location.hash) ? window.location.hash : null;
    if(null !== hash){
        //now I don't know how the markup is designed, so we'll just use `id`
        $(window).scrollTop($('[id='+hash+']').scrollTop());
    }
});

ページの読み込み時に、 という変数を作成しhash、 が存在するかどうかを確認し、hash存在する場合はハッシュ値を使用し、存在しない場合は null を使用します。条件では、値として定義した要素の to にウィンドウが到達するまでスクロールするようにウィンドウに指示しidますmatching the hash value。

さて、変数をどのように生成するかわかりません。要素content内に、必要な値を含む属性が必要です。<a>要素をどのように参照する予定かを教えていただければ、ミッシング リンクを接続します。

編集-- あなたのコメントに応えて。

$('.main-menu a').prop('href', function(a,b){
    return b+'#content';
});

これがあなたの jsFiddle です-- コンソールをチェックして、時間を無駄にする必要がないようにしてください。

編集 #2 -- モバイル検出への対応。

メディア クエリを使用する代わりに、ユーザー エージェント スニッフィングを使用します。ごく一般的なテクニックです。http://detectmobilebrowsers.com/の担当者は、多くの既知の一般的なモバイル デバイスの存在についてユーザー エージェントをチェックするために使用できるスクリプトを提供しています。

ここで jsFiddle をチェックしてください。

コードの大きなブロックを取得して、「mobileDetect.js」のようなファイルに配置するだけです。

以下はすべて//comments、上で書いたコードの実装であり、それに応じて条件ステートメントに配置されます。いくつかのデバイスでこれをテストしましたが、うまく機能します。

于 2012-11-13T08:19:06.603 に答える
0

わかりました、動作しました！..

交換します

$('.main-menu a').prop('href', function(a,b){
    return b+'#content';
});

これに：

$(function () {

     $('.main-menu a').each(function () {
    var href = $(this).attr('href');
    $(this).attr('href', href + '#content');
});
 });
于 2012-11-14T08:39:35.533 に答える