jqueryのタブ切り替え(ページ更新の防止)_jqueryに基づく

インターネット上で jquery エフェクトをたくさん見つけましたが、どれもこのようなものでしたので、自分で書きました。ページ更新によるタブ切り替えを防ぐには、
HTML コード:

コードをコピー コードは次のとおりです:

link href=" ../Style/admin.css" rel="stylesheet" type="text/css" />

プロジェクト情報 顧客仕事の質問 🎜 >

プロジェクト情報

仕事の質問

>
js コード:




コードをコピー

コードは次のとおりです:

$( function ( ) { $("div.tab").hide(); //すべてを隠す $("div.tabs a:first").addClass("current"); element Select $("div.tab:first").show(); //最初のコンテンツが表示されます$("div.tabs a").click(function () {

$ ( "div.tabs a").removeClass("current"); // すべてのタブから現在のスタイルを削除します

$(".tab").hide() // すべてを非表示にします
$(this ) .addClass("current");
var activeTab = $(this).attr("href") //div
$(activeTab).show();
//
var url = window.location.href;
var reg = /# を取得します。
if (reg.test(url)) {//# が含まれます。 # が 1 つだけ、# が複数ある場合は考慮されません
// すべてを非表示
$("div.tabs a").removeClass("current"); // すべてのタブから現在のスタイルを削除します
$ (".tab").hide(); //すべてを隠す
var href = url.split('#')[1];
$("div.tabs [href=#" href "] ").addClass("current");
$("#" href).show();
}
});


コードは非常に単純です。このアイデアも非常に明確ですが、非常に実用的です。
たとえば、上記の例では、ページを更新して 2 番目のタブに移動する場合、xxx.aspx#kehu を再指定するだけで済みます。
添付のスクリーンショット