タブをクリックすると画面が切り替わります。
デフォルトのタブになります。上のタブをクリックすると、この部分が書き換わります。
このタブはjQueryというjavascriptを使ったプログラムを利用しています。 Jimdo Tipsは、基本的にはスタイルシートをメインにしています。 プログラムの利用は、Jimdoの場合、思わぬトラブルの原因になることが考えられるからです。 ご利用になられる場合は、自己責任でお願いいたします。
Jimdoはクセがあるので、区切り線などを入れるときには注意が必要です。 また、編集は、直接ＨＴＭＬをいじることになります。
タブ切り替えの設置がうまく行かなかった場合（たぶん大丈夫だとは思いますが）実装の代行を行わせていただきます。料金は１案件につき3,000円かかります。 文章などの入力はお客様ご自信でお願いいたします。
タブの切り替えにはjQuery UIを使用しています。
実装される場合は、必ず削除してもかまわないテストページでテストをしてください。
※Jimdo
Tipsでは通常、CSSのみの情報を公開しています。これは、間違って実装しても、トラブルが起こらない、もしくは最小限に抑えることが出来るからです。
jQueryなどの使い方や危険性を知らない方によって引き起こされたトラブルについてはJimdo研究所は一切責任を負いません。すべて自己責任で行ってください。
参照元
■JavaScript 日本語リファレンス
参考になるサンプルが多数紹介されているとてもわかりやすい技術解説サイトです。
http://js.studio-kingdom.com/
HTML
この下のＨＴＭＬをコンテンツを追加で、ウィジェットに貼り付けます。
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">タブ1</a></li>
<li><a href="#tabs-2">タブ2</a></li>
<li><a href="#tabs-3">タブ3</a></li>
</ul>
<div id="tabs-1">
<p>デフォルトのタブです。</p>
</div>
<div id="tabs-2">
<p>タブ2のコンテンツ領域です。</p>
<p>タブ2のコンテンツ領域です。</p>
<p>タブ2のコンテンツ領域です。</p>
<p>タブ2のコンテンツ領域です。</p>
<p>タブ2のコンテンツ領域です。</p>
<p>タブ2のコンテンツ領域です。</p>
</div>
<div id="tabs-3">
<p>タブ3のコンテンツ領域です。タブ2のコンテンツ領域です。</p>
</div>
</div>
CSS
この下のＣＳＳを、管理メニューの設定からヘッダーを追加に貼り付けて保存します。
<style type="text/css">
/*<![CDATA[*/
#tabs{
padding:20px;
background:#CCC;
border-radius:6px;
}
#tabs ul{
list-style:none;
padding:0;
margin:0 0 0 10px;
width:100%;
}
#tabs ul li{
display:inline-block;
padding:0;
margin:0;
}
#tabs ul li a{
cursor:pointer;
display:block;
padding:5px 40px;
margin:0;
border-radius:6px 6px 0 0;
background:#F0F0F0;
text-decoration:none;
color:#333;
border-bottom:1px solid #CCC;
}
#tabs ul li a:active{
outline: none;
}
#tabs ul li.ui-tabs-active a{
background:#FFF;
outline: none;
border-bottom:1px solid #FFF;
}
#tabs > div{
padding:20px;
background:#FFF;
border-radius:6px;
}
/*]]>*/
</style>
▼ タグの貼り付け方はここ マウスを当てると画像が開きます。
