JavaScriptとCSSでタブメニュー
display = 'block'; display = 'none';
// HTMLタブの内容。
<ul id="tabList">
<li id="tabList1">HTML</li>
<li id="tabList2">CSS</li>
<li id="tabList3">JavaScript</a></li>
</ul>
<ul id="tabList">
<li id="tabList1">HTML</li>
<li id="tabList2">CSS</li>
<li id="tabList3">JavaScript</a></li>
</ul>
// CSSタブの内容
- floatプロパティ float:left;
- 指定した要素を左に配置して、それに続く内容を
右側に回り込ませます。 - 疑似クラス a:hover
- アンカーテキストにマウスが来たときに
アンカーのスタイルを変更する という動作を、JavaScriptを利用しなくても
スタイルシートだけで実行する事が出来ます。 - display プロパティ
- display プロパティは表示の仕方を指定する
プロパティです。このサンプルでも使っています。
// JavaScriptタブの内容。
function cngTab(IDname) {
var inNer=document.getElementById('inner');
var inDiv=inNer.getElementsByTagName('div');
for (var i = 0; i < inDiv.length;i++) {
inDiv[i].style.display = 'none'; }
document.getElementById(IDname).style.display = 'block'; }
ロリポップ！のドメインは選べる全８５種類！！
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
サンプルソース
<html>
<head>
<title>タブメニュー</title>
<style type="text/css">
<!--
/* タブメニュー表示領域 */
.tabbox {
width: 400px;
}
/* タブ部分 */
#tabList {
list-style-type:none;/* リストマーク非表示 */
margin: 0; padding: 0;/* マージン,パディング初期化 */
}
#tabList li{
float: left; /* 回り込み */
margin-right:1px; /* 右側のマージン */
border-radius: 10px 10px 0 0; /* 角丸 (右上、左上) */
text-shadow:2px 2px 2px #000; /*影文字(縦方向ずれ、横方向ずれ、ぼかし半径、影の色)*/
}
#tabList li a {
display: block; /* ブロックレベル表示 */
width: 100px;
padding: 3px; /* 内側余白 */
text-align: center;/* 文字 中央揃え */
text-decoration : none; /* 文字飾り(下線、上線、取消線)なし */
font-weight : bold; /* フォントの太さ bold(太い) */
color: white; /* 文字の色 */
}
#tabList li a:hover { /*マウスポインタが乗った時*/
color: yellow;
text-decoration : underline; /*文字飾り,下線付加*/
}
/*タブの背景色 */
#tabList1 { background-color: blue; }
#tabList2 { background-color: #00b51e;}
#tabList3 { background-color: #cc0099; }
/* タブ内容の表示ボックス */
#inner div {
height: 150px; overflow: auto; /* 内容が溢れたらスクロールバー 表示 */
clear: left; /* 回りこみ解除 */
padding:0.5em;
border-radius: 0 0 5px 5px; /* 角丸 (右下、左下) */
}
/* タブ内容 */
#tab1 {
border: 2px solid blue; /* ボーダー : 幅,線種,色 */
border-top-width : 5px; /* 上ボーダー : 幅 */
background-color: #f0ffff; /* 背景色 */
}
#tab2 {
border: 2px solid #00b51e;
border-top-width : 5px;
background-color : #e8ffd9;
}
#tab3 {
border: 2px solid #cc0099;
border-top-width : 5px;
background-color : #ffeeff;
}
-->
</style>
<script type="text/javascript">
<!--
function cngTab(IDname) {
// 全部非表示 ボックス非生成(当該要素の領域を確保しない)
var inNer = document.getElementById('inner');
var inDiv = inNer.getElementsByTagName('div');
for (var i = 0; i < inDiv.length;i++) {
inDiv[i].style.display = 'none';
}
// 引数 'IDname'の要素を表示(当該要素の領域を確保)
document.getElementById(IDname).style.display = 'block';
}
// -->
</script>
</head>
<body>
<div class="tabbox">
<ul id="tabList"><!--UL要素 リスト、箇条書き-->
<li id="tabList1"><a href="javascript:cngTab('tab1')">HTML</a></li>
<li id="tabList2"><a href="javascript:cngTab('tab2')">CSS</a></li>
<li id="tabList3"><a href="javascript:cngTab('tab3')">JavaScript</a></li>
</ul>
<div id="inner">
<div id="tab1">// HTMLタブの内容。
</div>
<div id="tab2">// CSSタブの内容
</div>
<div id="tab3">// JavaScriptタブの内容。
</div>
</div>
</div>
<script type="text/javascript">
<!--
cngTab("tab1");// デフォルトのタブを選択
-->
</script>
</body>
</html>display プロパティ
display プロパティは当該要素の表示形式を指定します。
上記のボタンを押してください。それぞれのボタンで、
その内容の表示(display:block) / 非表示(display:none)を切り替えています。
display:none;を指定すると当該要素は領域そのものを生成しないので非表示になります。
上のサンプルで、すべての内容を表示にしてHTML 内容を非表示にしてください。
下の内容がせり上がります。これで "当該要素の領域も確保しない"ことが判ります。
display:block;はブロックレベルで表示します。
JavaScript 構文:
object.style.display='block';
object.style.display='none';
- WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
- ロリポップ！のドメインは選べる全８５種類！！
- border-styleプロパティ
- border-radiusプロパティを使った角丸
- paddingプロパティ ボックスの内側の余白
- text-align プロパティ
- visibilityプロパティ 領域の表示、非表示
- display プロパティ
- a:hoverで、へこむアンカーテキスト、リンクボタン
- a:hover 擬似クラス
- floatプロパティ float:left; float:right;
- リスト・箇条書き HTMLタグ
- アコーディオンメニュー縦開き
- アコーディオンメニュー 横開き
