定番
新着
履歴

jQuery タブ(横・縦)のサンプル

サンプル
コード

タブ(横)

  • HTML
  • CSS
  • JS
  • ハイパーテキスト
    マークアップ
    ランゲージ
  • カスケーディング・スタイル・シート
  • ジャヴァスクリプト
サンプル
コード

タブ(縦)

  • User Experience
    ユーザーエクスペリエンス - 使用したときの経験、満足
  • User Interface
    ユーザーインターフェース
    ユーザとの接触面
  • ユーザビリティ
    使い勝手、利便性
  • UX
  • UI
  • usability
サンプル
コード

タブ(縦)制御ボタン付き

  • User Experience
    ユーザーエクスペリエンス - 使用したときの経験、満足
  • User Interface
    ユーザーインターフェース
    ユーザとの接触面
  • ユーザビリティ
    使い勝手、利便性
  • UX
  • UI
  • usability
↑上へ ↓下へ
© 2024 kipure
Top



<style>
ul#demo_headline {
width:100%;
margin: 10px 0px 0;
padding: 0;
}
ul#demo_headline li{
display: inline-block;
width:60px;
height: 30px;
line-height: 30px;
margin:0 5px 0px 0px;
background-color:#AAA;
text-align: center;
cursor: pointer;
}

ul#demo_headline li.current{
background-color:#FFF;
}

ul#demo_story {
width:100%;
margin: 0px 0px;
padding: 0;
}

ul#demo_story li{
display: none;
vertical-align: top;
width:90%;
height:100px;
background-color:#FFF;
padding: 5%;
z-index: 2;
}
ul#demo_story li.current{
display: block;
}

</style>

<script>
$(document).ready(function(){
  demoClickAction();
});

function demoClickAction(){
  $('#demo_headline li').click(function() {
    $('#demo_story li').hide();
    $('#demo_headline li').removeClass('current');
    $(this).addClass('current');
    index = $("#demo_headline li").index(this) + 1;
	$('#demo_story li:nth-child('+index+')').removeClass('current');
	$('#demo_story li:nth-child('+index+')').fadeIn();
	$('#demo_story li:nth-child('+index+')').addClass('current');
  });


}

</script>


<h1>タブ(横)</h1>
<div>

	<ul id="demo_headline">
	<li class="current">HTML</li><li>CSS</li><li>JS</li>
	</ul>
	
	<ul id="demo_story">
	<li class="current">ハイパーテキスト<br/>マークアップ<br/>ランゲージ</li>
	<li>カスケーディング・スタイル・シート</li>
	<li>ジャヴァスクリプト</li>
	</ul>

</div>



<style>
ul#demo2_headline {
float:left;
width:30%;
margin: 10px 0px 0 0;
padding: 0;
}
ul#demo2_headline li{
display: inline-block;
width:100%;
height: 30px;
line-height: 30px;
margin:0;
background-color:#AAA;
text-align: center;
cursor: pointer;
}

ul#demo2_headline li.current{
background-color:#FFF;
}

ul#demo2_story {
float: left;
width:70%;
margin: 10px 0 0 0px;
padding: 0;
}

ul#demo2_story li{
display: none;
vertical-align: top;
height:150px;
background-color:#FFF;
padding: 5% ;
z-index: 2;
}
ul#demo2_story li.current{
display: block;
}


</style>

<script>
$(document).ready(function(){
  demo2_clickAction();
});

function demo2_clickAction(){
  $('#demo2_headline li').click(function() {
    $('#demo2_story li').hide();
    $('#demo2_headline li').removeClass('current');
    $(this).addClass('current');
    index = $("#demo2_headline li").index(this) + 1;
	$('#demo2_story li:nth-child('+index+')').removeClass('current');
	$('#demo2_story li:nth-child('+index+')').fadeIn();
	$('#demo2_story li:nth-child('+index+')').addClass('current');
  });
}

</script>


<h1>タブ(縦)</h1>

<div>

	<ul id="demo2_story">
	<li class="current">User Experience<br>ユーザーエクスペリエンス - 使用したときの経験、満足</li>
	<li>User Interface<br>ユーザーインターフェース<br>ユーザとの接触面</li>
	<li>ユーザビリティ<br>使い勝手、利便性</li>
	</ul>
	
	<ul id="demo2_headline">
	<li class="current">UX</li>
	<li>UI</li>
	<li>usability</li>
	</ul>

</div>



<style>
ul#demo3_headline {
float:left;
width:30%;
margin: 10px 0px 0 0;
padding: 0;
}
ul#demo3_headline li{
display: inline-block;
width:100%;
height: 30px;
line-height: 30px;
margin:0;
background-color:#AAA;
text-align: center;
cursor: pointer;
}

ul#demo3_headline li.current{
background-color:#FFF;
}

ul#demo3_story {
float: left;
width:70%;
margin: 10px 0 0 0px;
padding: 0;
}

ul#demo3_story li{
display: none;
vertical-align: top;
height:150px;
background-color:#FFF;
padding: 5%;
z-index: 20;
}
ul#demo3_story li.current{
display: block;
}

.btn {
position: relative;
top:10px;
margin-top:10px;
}


</style>

<script>
$(document).ready(function(){
  demo3_clickAction();
  num = 1;
});

function demo3_clickAction(){
  $('#demo3_headline li').click(function() {
    $('#demo3_story li').hide();
    $('#demo3_headline li').removeClass('current');
    $(this).addClass('current');
    index = $("#demo3_headline li").index(this) + 1;
	$('#demo3_story li:nth-child('+index+')').removeClass('current');
	$('#demo3_story li:nth-child('+index+')').fadeIn();
	$('#demo3_story li:nth-child('+index+')').addClass('current');
	num = index;
	//$('#num').html(num);
  });

  $('#up').click(function() {
    if(num > 1){
      index = (num--) -1;
      $('#demo3_story li').hide();
      $('#demo3_headline li').removeClass('current');
      $('#demo3_headline li:nth-child('+index+')').addClass('current');
      $('#demo3_story li:nth-child('+index+')').removeClass('current');
      $('#demo3_story li:nth-child('+index+')').fadeIn();
      $('#demo3_story li:nth-child('+index+')').addClass('current');
        num = index;
    }
          });


  $('#down').click(function() {
    if(num < $("#demo3_story li").length){
    	index = (num++) + 1;
      $('#demo3_story li').hide();
      $('#demo3_headline li').removeClass('current');
    	$('#demo3_headline li:nth-child('+index+')').addClass('current');
    	$('#demo3_story li:nth-child('+index+')').removeClass('current');
    	$('#demo3_story li:nth-child('+index+')').fadeIn();
    	$('#demo3_story li:nth-child('+index+')').addClass('current');
    	num = index;
    }
  });

}

</script>


<h1>タブ(縦)制御ボタン付き</h1>

<div>

<ul id="demo3_story">
<li class="current">User Experience<br>ユーザーエクスペリエンス - 使用したときの経験、満足</li>
<li>User Interface<br>ユーザーインターフェース<br>ユーザとの接触面</li>
<li>ユーザビリティ<br>使い勝手、利便性</li>
</ul>

<ul id="demo3_headline">
<li class="current">UX</li>
<li>UI</li>
<li>usability</li>
</ul>


<a id="up" class="clear btn">↑上へ</a>
<a id="down" class="btn">↓下へ</a>

</div>