Yetii

Yetii
YetiiのjQueryをダウンロード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yetii</title>

<style>
#tabBox {
width: 500px;
margin: 0px;
}

ul#tabBox-nav {
list-style-type: none;
width: 460px;
float: left;
margin: 0;
/* タブの背景の画像は任意で用意する */
background: url(img/blue3.png) bottom left repeat-x;
}

ul#tabBox-nav li {
margin-right: 2px;
float: left;
}

ul#tabBox-nav a {
float: left;
display: block;
padding: 4px 8px;
border: 1px solid #ccc;
border-bottom: 0;
color: #666;
background: #eee;
text-decoration: none;
font-weight: bold;
outline: none;
}

ul#tabBox-nav a:hover {
background: #fff;
}

ul#tavBox-nav a:active {
background: #fff;
padding-bottom: 5px;
cursor: default;
color: #00bf08;
}

.tab {
width: 478px;
clear: left;
border: 1px solid #ccc;
border-top: none;
padding: 10px;
}

.gr {
color: #00bf08;
font-weight: bold;
}
</style>

<script src="js/yetii.js" type="text/javascript"></script>

</head>
<body>

<div id="tabBox">
<ul id="tabBox-nav">
<li><a href="#sampletab1">tab01</a></li>
<li><a href="#sampletab2">tab02</a></li>
<li><a href="#sampletab3">tab03</a></li>
<li><a href="#sampletab4">tab04</a></li>
</ul><!-- ▲/ tabBox-nav -->

<div class="tab" id="sampletab1">
<p><span class="gr">tab01</span><br>に切り替わりました。</p>
</div><!-- ▲/ sampletab1 -->

<div class="tab" id="sampletab2">
<p><span class="gr">tab02</span><br>に切り替わりました。</p>
</div><!-- ▲/ sampletab2 -->

<div class="tab" id="sampletab3">
<p><span class="gr">tab03</span><br>に切り替わりました。</p>
</div><!-- ▲/ sampletab3 -->

<div class="tab" id="sampletab4">
<p><span class="gr">tab04</span><br>に切り替わりました。</p>
</div><!-- ▲/ sampletab4 -->

</div><!-- ▲/ tabBox -->

<script>
var tabber1 = new Yetii({
	id: 'tabBox'
});
</script>

</body>
</html>
ブラウザで表示【 Chrome 】
可変未対応
PAGE TOP