タブページの切り替え方法の包括的な分析

タブを切り替える方法は次のとおりです。

1。タブの表示と非表示を制御します

2。タブが切り替われず、データはロードされます

タブの表示と非表示を制御します

フロントエンドスクリプト：

1。JQUERY実装：

 $（function（）{$（ "。sdkj-tabs li"）。click（function（）{$（this）.addclass（ "on"）。siblings（） li "）

jQueryファイルを紹介します。コードは簡単です

jQueryファイルは大きく、ブラウザは互換性がありません

2。JS実装

function selecttab（showcontent、selfobj）{var tab = document.getelementbyid（ "sdkj-tabs"）。getelementsbytagname（ "li"）; var tagn = tab.length; for（i = 0; i ++）{tab [i] .className = "" j = document.getElementById（ "cont-tab"+i）;

jQueryファイルを導入する必要はありません

コードボリュームは大きく、タグごとに関数とIDが必要です

3。プラグインの実装

var tabs = function（）{function tag（name、elem）{return（elem || document）.getelementsbytagname（name）;} //対応するID関数ID（name）{return document.getElementbyid（name）;} function first（elem）{elem = elem.firstchild; return elem && elem.nodetepeepeepeepeepeepeepeepeepeepeepeepeepeepeepeepe Elem：next（elem）;} function next（elem）{elem = elem.nextsibling; while（elem）{if（elem.nodetype == 1）{return elem;} else {elem = nextsibling;}}} function cild（elem）{var arrays = var array（）; var array（）; var array（）; elem_child = first（elem）; elem = tag（ "li"、id（elemid））; var tabs = child（id（tabid））; var listnum = elem.length; var tabnum = tabs.length; console.log（tabs）; for（var i = 0; i <listnum; i ++）{elem [i] .onclick =（function（i）{function（i）{for） j = 0; j <3; j ++）{if（i == j）{tabs [j] .style.display = "block"; elem [j] .classname = "on";} else {tabs [j] .style.display = "none"; elem [j] .classname = "" .classname = " ";}}}}}）（i）}}}}（）; tabs.set（" sdkj-tabs "、" cont-tabs "）; // execute

jQueryファイルを導入する必要はありません。親要素IDを追加するだけです

上記は、エディターが紹介したタブページの切り替え方法の包括的な分析の完全な説明です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！