タブ切替で表示内容を切り替える方法のタグを書いておきます。
タブ切替は、javascriptと、HTMLのソースを併用して行います。
追記ですが・・・・
この方法よりもjQueryを使ったタブ切替の方が良いかと思います。
ソースは次の通り
＜head＞内に入れるJSファイルのソース
|
1 2 3 4 5 6 7 8 |
function ChangeTab(tabname) { document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; if(tabname) { document.getElementById(tabname).style.display = 'block'; } } |
次に＜body＞内の設置場所に置くソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div c<div class="tabbox"> <p class="tabs"> <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">コンテンツA</a> <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">コンテンツB</a> <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">コンテンツC</a> </p> <div id="tab1" class="tab"> コンテンツAの内容 </div> <div id="tab2" class="tab"> コンテンツBの内容 </div> <div id="tab3" class="tab"> コンテンツCの内容 </div> </div> <script type="text/javascript"><!-- ChangeTab('tab1'); --></script> |
17~19行目のスクリプトが必要になります。
以上のソースで作りますが、ワードプレスではソース編集がビジュアルにした時にソースが
勝手に書き換えられて消えてします。
そこで、外部PHPとしてテンプレートを作り、コンテンツ内に設置するには
Shortcode Exec PHPを使ってショートコードを作り設置すればOK
