タブを切り替える方法は次のとおりです。
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 "); // executejQueryファイルを導入する必要はありません。親要素IDを追加するだけです
上記は、エディターが紹介したタブページの切り替え方法の包括的な分析の完全な説明です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます!