<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>