3

私はまだ javaScript/jQuery にかなり慣れていないので、これが初歩的であると思われる場合は申し訳ありません。

URL onClick のハッシュを変更できることはわかっていますが、要素からクラスを追加/削除したり、要素を非表示/表示したり、要素を URL のハッシュに基づいてフェードイン/フェードアウトしたりできますか?

1 つのページ (ホーム、概要、画像ギャラリーなど) にすべてのコンテンツを含む Web サイトを作成し、一部のコンテンツを非表示にして、onClick または onHover で他のコンテンツを表示しようとしています。しかし、サイトの特定の場所に移動できる URL の機能も保持したいので、javaScript または jQuery を使用して、URL のハッシュに基づいてイベントをトリガーする方法はありますか?

if hash = #gallery のように、ギャラリー要素を表示します。

4

3 に答える 3

8

ページが実際にリロードされる場合 (デフォルトのリンク動作)、jquery スクリプトを実行してハッシュ値を確認してください。

var currentValue = window.location.hash.substr(1);
$(document).ready(function() {
  //Page loaded..
  alert('Do something with the current value');
});

ページがリロードされない場合は、 $('a').click(); を作成してください。この例のようにハッシュ値に応答する関数:

$(document).ready(function() {
    $('a').click(function() {
      var value = $(this).prop('href').substr(1); //remove hash using substr(1)
      alert('do something else with the '+value+' value!');
      return false; //stop default link behaviour
    });
});
于 2013-01-07T03:52:12.500 に答える
1

あなたが提供したコードの最初の文字列を使用して終了し、次にさまざまな # 値の if/else ステートメントを使用しました。

javaScript/jQuery
var currentValue = window.location.hash.substr(1)
$(document).ready(function() {
  if(currentValue == "Home") {
    $("#about").addClass("boxshadow");
    $("#info_about").addClass("down");
    $("#info_contact").addClass("up");
    $("#info_pricing").addClass("up");
    etc...
}

else if(currentValue == "Gallery") {    
    $("#door").click();
    $("#about").click();
}


else {
    $("#about").addClass("boxshadow");
    $("#info_about").addClass("down");
    $("#info_contact").addClass("up");
    $("#info_pricing").addClass("up");
    etc...
}
});
于 2013-01-07T22:19:22.443 に答える
0

ハッシュを変更するすべてのリンクをチェックする必要がある場合は、

$("a[href^=#]").on("click",function(){
     alert("clicked something with hash");
});

これは、で始まるリンクがクリックされるたびにトリガーされます#

于 2014-05-20T15:30:39.390 に答える