法則85 FAQページはJavaScriptを併用して作成する
リストを表示するテンプレートソース
<div class="qaContainer">
<ul class="tab"><MTCategories>
<li id="qa<$MTCategoryBasename$>"><a href="#qa<$MTCategoryBasename$>_area"><$MTCategoryLabel$></a></li>
</MTCategories></ul>
<MTCategories>
<dl id="qa<$MTCategoryBasename$>_area" class="qaArea">
<MTEntries lastn="0">
<dt><$MTEntryTitle$></dt>
<dd><$MTEntryBody$></dd>
</MTEntries>
</dl>
</MTCategories>
<!-- / .qaContainer --></div>
JavaScriptを読み込むテンプレートソース
<script type="text/javascript" src="<$MTLink template="jquery"$>"></script>
<script type="text/javascript" src="<$MTLink template="qa"$>"></script>
カテゴリをタブで表示するCSSソース
.qaContainer ul.tab {
margin: 0;
padding: 0;
}
.qaContainer ul.tab li {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
border: 1px solid #CCF;
}
.qaContainer ul.tab li a {
display: block;
width: 110px;
padding: 5px 10px;
}
.qaContainer ul.tab li.active {
background: #CCCCFF;
}
「Q」と「A」のスタイルを設定するCSSソース
.qaContainer dl {
clear: both;
zoom: 1;
padding: 10px;
border: 1px solid #999;
}
.qaContainer dl dt {
font-weight: bold;
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid #999;
}
.qaContainer dl dd {
margin-bottom: 25px;
padding-left: 15px;
}
ダウンロード
