ナビスクリプト - パズル＆ドラゴンズ非公式wiki 【パズドラ】

スクリプト部分

<script type="text/javascript">
<!--
$(function() {
	$("#tab li").click(function() {
		var num = $("#tab li").index(this);
		$(".content_wrap").addClass('disnon');
		$(".content_wrap").eq(num).removeClass('disnon');
		$("#tab li").removeClass('select');
		$(this).addClass('select')
	});
});
//-->
</script>
<noscript>JavaScriptが無効になっているようです。</noscript>

---

カテゴリタブ部分

<ul id="tab" style="padding:0;margin:0;">
<li>No.</li>
<li>タイプ・属性</li>
<li>通常入手系</li>
<li>レアガチャ限定系</li>
<li>コラボ系</li>
<li>期間限定D系</li>
<li>その他</li>
<li class="label2">覚醒スキル別</li>
<li class="label3">編集者向け</li>
</ul>

---

カテゴリ内容部分

#divclass(content_wrap,disnon){#include_cache(オススメ編成例/ナビゲーション/No)}
#divclass(content_wrap,disnon){#include_cache(オススメ編成例/ナビゲーション/タイプ・属性)}
#divclass(content_wrap,disnon){#include_cache(オススメ編成例/ナビゲーション/通常入手系)}
#divclass(content_wrap,disnon){#include_cache(オススメ編成例/ナビゲーション/レアガチャ限定系)}
#divclass(content_wrap,disnon){#include_cache(オススメ編成例/ナビゲーション/コラボ系)}
#divclass(content_wrap,disnon){#include_cache(オススメ編成例/ナビゲーション/期間限定D系)}
#divclass(content_wrap,disnon){#include_cache(オススメ編成例/ナビゲーション/その他)}
#divclass(content_wrap,disnon){#include_cache(オススメ編成例/ナビゲーション/覚醒スキル別)}
#divclass(content_wrap,disnon){#include_cache(オススメ編成例/ナビゲーション/編集者向け)}
#divclass(content_wrap,nolnkb){#left(){↑カテゴリを選んでください}}

@wiki独自の構文ですので少し解説をします。
※include_cacheプラグインで各ページをincludeしています。　例：オススメ編成例/ナビゲーション/No
※divclassプラグインを用いて<div class"content_wrap disnon">もしくは<div class"content_wrap nolnkb">と同じ構造を再現しています。
　include_cacheプラグインプラグインを使用する都合でこうしています。
※リンク装飾についてはcssで行っています　→　div.content_wrap a {省略}　等

CSS

非表示用

.disnon {display: none;}

カテゴリ表示枠装飾用

.content_wrap {clear: left;border:1px solid #DDD; margin-top:0;padding:5px; margin-top:10px;background:#EEE url(http://cdn18.atwikiimg.com/pazdra/pub/bg_angel.png) no-repeat scroll top right;}
div.content_wrap a {
display:inline-block;background-color:#480;color:#FFFFFF;font-weight:bold;
text-decoration: none;
background: -moz-linear-gradient(top,#688A20, #96B83F 50%,#679A00 50%,#81B400);
background: -webkit-gradient(linear, left top, left bottom, from(#688A20), color-stop(0.5,#96B83F), color-stop(0.5,#679A00), to(#81B400));
padding: 12px 5px;
margin: 3px;
min-width: 4em;
text-align: center;
}
div.content_wrap a:hover {
background: -moz-linear-gradient(top,#E5F2BF, #B3D263 50%,#81B400 50%,#679A00);
background: -webkit-gradient(linear, left top, left bottom, from(#E5F2BF), color-stop(0.5,#B3D263), color-stop(0.5,#81B400), to(#679A00));
}

一部リンクの装飾用

div.nolnkb {text-align:center;}
div.nolnkb a {background: none; color:#480; padding: 5px; margin: 0;}
div.nolnkb a:hover {background: #FFA500; color:#FFFFFF;padding: 5px; margin: 0;}