プラグイン作成　管理画面でタブ切り替え機能

プラグイン作成時の管理画面で
タブ表示を行う。
htmlは、プラグインのルート
cssは、プラグイン/css/user-plugin.css
jsは、プラグイン/js/user-plugin.js
にそれぞれ作成する。

html

<ul class="tab">
	<li class="select">タブＡ</li>
	<li>タブＢ</li>
	<li>タブＣ</li>
	<li>タブＤ</li>
</ul>
<ul class="content">
	<li>タブＡの本文</li>
	<li class="hide">タブＢの本文</li>
	<li class="hide">タブＣの本文</li>
	<li class="hide">タブＤの本文</li>
</ul>

css

.tab{overflow:hidden;}
.tab li{background:#ccc; padding:5px 25px; float:left; margin-right:1px;}
.tab li.select{background:#eee;}
.content li{background:#eee; padding:20px;}
.hide {display:none;}

jQuery

jQuery(function($) {
	//クリックしたときのファンクションをまとめて指定
	$('.tab li').click(function() {

		//.index()を使いクリックされたタブが何番目かを調べ、
		//indexという変数に代入します。
		var index = $('.tab li').index(this);

		//コンテンツを一度すべて非表示にし、
		$('.content li').css('display','none');

		//クリックされたタブと同じ順番のコンテンツを表示します。
		$('.content li').eq(index).css('display','block');

		//一度タブについているクラスselectを消し、
		$('.tab li').removeClass('select');

		//クリックされたタブのみにクラスselectをつけます。
		$(this).addClass('select')
	});
});

ヘッダにcssとjsを追加

function user_plugin_admin_style() {
	// css読込み
	wp_enqueue_style( 'my_admin_style', WP_PLUGIN_URL.'/user-plugin/css/user-plugin.css' );
	// js読込み
	wp_enqueue_script( 'my_admin_script', WP_PLUGIN_URL.'/user-plugin/js/user-plugin.js' );
}
add_action( 'admin_enqueue_scripts', 'user_plugin_admin_style');
//add_action( 'admin_print_scripts', 'user_plugin_admin_style');

以上