menu
menu

キーワード検索

 

前月(9月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 4-) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  5. ( 7↑) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  6. ( 5↓) 【jQuery入門】jQueryで日時を表示
  7. (10↑) 【HTML5】HTML5・ページ作成の基本
  8. ( 9↑) 【MySQL】Windows 10にMySQLをインストール
  9. ( 8↓) 【Mac Tips】MacにInkscapeをインストール
  10. ( 6↓) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

【タブレイアウト】JavaScriptでタブレイアウト

  • Labs

JavaScript

こんにちは(・∀・)

JavaScriptを使用したサンプルをご紹介します。今回はタブレイアウトです。

サンプル
HTML

<div id="tab">
<div id="tabhead">
<div id="tab1h"><a href="#tab1" class="tab1">TAB1</a></div>
<div id="tab2h"><a href="#tab2" class="tab2">TAB2</a></div>
<div id="tab3h"><a href="#tab3" class="tab3">TAB3</a></div>
<div id="tab4h"><a href="#tab4" class="tab4">TAB4</a></div>
<div id="tab5h"><a href="#tab5" class="tab5">TAB5</a></div>
<!--tabhead--></div>
<div id="tabbody">
<div id="tab1b">
<p>タブ1です。</p>
</div>
<div id="tab2b">
<p>タブ2です。<br>タブ2です。<br></p>
</div>
<div id="tab3b">
<p>タブ3です。<br>タブ3です。<br>タブ3です。</p>
</div>
<div id="tab4b">
<p>タブ4です。<br>タブ4です。<br>タブ4です。<br>タブ4です。</p>
</div>
<div id="tab5b">
<p>タブ5です。<br>タブ5です。<br>タブ5です。<br>タブ5です。<br>タブ5です。</p>
</div>
<!--tabbody--></div>
<!--tab--></div>
CSS

#tab {
  width: 320px;/*横幅はここで設定します。100%にすれば可変になります。*/
  min-width: 320px;
  text-align: left;
  margin: 0 auto;
}
/*tabhead*/
#tab1h {
  float: left;
  width: 20%;
  height: 30px;
  background: url(img/th1.png) repeat-x bottom left;
}
#tab2h,
#tab3h,
#tab4h,
#tab5h {
  float: left;
  width: 20%;
  height: 30px;
  background: url(img/th2.png) repeat-x bottom left;
}
#tabhead a,
#tabhead a:link,
#tabhead a:visited {
  display: block;
  text-align: center;
  color: #111;
  font-size: 14px;
  line-height: 2.2;
  text-decoration: none;
  outline: none;
}
#tabhead a:hover,
#tabhead a:active {
  color: #777;
  text-decoration: none;
}
/*tabbody*/
#tab1b,
#tab2b,
#tab3b,
#tab4b,
#tab5b {
  overflow: hidden;
  background: #eef2fe;
  padding: 10px;
  /*縦幅を固定にしたいときはここで設定します。*/
}
JavaScript

document.write('');
function tabChange(){
var tabobj = document.getElementsByTagName('a');
for(var i=0; i < tabobj.length; i++){
if(tabobj[i].className == 'tab1'){
tabobj[i].onclick = function(){
tab_h('tab1h','url(img/th1.png)');
tab_b('tab1b');
return false;
}
}else if(tabobj[i].className == 'tab2'){
tabobj[i].onclick = function(){
tab_h('tab2h','url(img/th1.png)');
tab_b('tab2b');
return false;
}
}else if(tabobj[i].className == 'tab3'){
tabobj[i].onclick = function(){
tab_h('tab3h','url(img/th1.png)');
tab_b('tab3b');
return false;
}
}else if(tabobj[i].className == 'tab4'){
tabobj[i].onclick = function(){
tab_h('tab4h','url(img/th1.png)');
tab_b('tab4b');
return false;
}
}else if(tabobj[i].className == 'tab5'){
tabobj[i].onclick = function(){
tab_h('tab5h','url(img/th1.png)');
tab_b('tab5b');
return false;
}
}
}
}
function addEvent(init){
if(window.addEventListener){
window.addEventListener("load",init, false);
}else if(window.attachEvent){
window.attachEvent("onload",init);
}
}
addEvent(function(){
tabChange();
tab_h('tab1h','url(img/th1.png)');
tab_b('tab1b');
});
function tab_h(tabh,tabi){
document.getElementById('tab1h').style.backgroundImage = 'url(img/th2.png)';
document.getElementById('tab2h').style.backgroundImage = 'url(img/th2.png)';
document.getElementById('tab3h').style.backgroundImage = 'url(img/th2.png)';
document.getElementById('tab4h').style.backgroundImage = 'url(img/th2.png)';
document.getElementById('tab5h').style.backgroundImage = 'url(img/th2.png)';
if(tabh){
document.getElementById(tabh).style.backgroundImage = tabi;
}
}
function tab_b(tabb){
document.getElementById('tab1b').style.display = 'none';
document.getElementById('tab2b').style.display = 'none';
document.getElementById('tab3b').style.display = 'none';
document.getElementById('tab4b').style.display = 'none';
document.getElementById('tab5b').style.display = 'none';
if(tabb){
document.getElementById(tabb).style.display = 'block';
}
}
Result

サンプルデモはこちら


関連リンク

CSSだけでサイズ可変・スマホ対応のタブレイアウト
jquery.cookie.jsでサイズ可変・スマホ対応のタブレイアウト
サイズ可変・スマホ対応のタブレイアウト
クッキーを使ったタブレイアウト

  • カテゴリー:Labs