▼マウスオーバーするとタブが切り替わります。
新宿三丁目にある焼酎と焼き鳥が美味しいお店。店内は、ほの暗い照明で、焼酎棚がライトアップされていておしゃれ。バーカウンターがメインで焼き鳥屋さんというよりシックなバーのような雰囲気★梅酒、焼酎、地酒の品揃えが豊富で珍しいものもあったり♪料理はどれも手が込んでいてお酒に合うメニューがいっぱいあります！
白レバーは、ほぼレア状態で口にいれるとふわっととろけます♪味噌ダレととっても合ってます。5本くらいはぺろりといけそうｗフォアグラステーキより美味しいかも！？
黒いのはしいたけじゃありませんｗさつま揚げです。箸で切らずに、そのまま揚げたてをぱくぱくいただくのが流儀のようです。味がしっかりついているので、このままいけます！
白子にウニがたっぷりのってます★箸でつかむのがむずかしいくらい、お豆腐みたいにとろとろ！口に入れるとじゅわーっとうまみが広がります。あー幸せ！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>エフェクト操作：基本：show()、hide()の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var tab_container = $('div.tabs > div');
tab_container.hide().filter(':first').show();
$('div.tabs ul.tab_navi a').mouseover(function () {
tab_container.hide();
tab_container.filter(this.hash).show();
$('div.tabs ul.tab_navi a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').mouseover();
});
</script>
<style type="text/css">
.sample { width:540px; }
ul.tab_navi,
ul.tab_navi li {
list-style:none;
margin:0; padding:0;
overflow:hidden;
}
ul.tab_navi li {
display:inline;
}
ul.tab_navi li a {
margin:0 5px 0 0; padding:5px;
display:block;
width:10em;
text-align:center;
float:left;
background-color:#ccc;
color:#000;
text-decoration:none;
}
ul.tab_navi li a.selected,
ul.tab_navi li a:hover {
background-color:#333;
color:#fff;
}
ul.tab_navi li a:focus {
outline:0;
}
div.tabs div {
margin:0; padding:0;
clear:both;
height:100%;
overflow:hidden;
}
div.tabs div h2 {
margin:10px;
}
div.tabs div img {
float:left; margin-right:10px;
}
#first,
#third { background-color:#e8e8e8; border:5px solid #333; }
#second,
#fourth { background-color:#666; color:#fff; border:5px solid #333; }
#first p,
#third p,
#second p,
#fourth p { margin:10px 5px 0 0; }
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>エフェクト操作：基本：show()、hide()の使用例 | jQuery</h1>
<p>▼マウスオーバーするとタブが切り替わります。</p>
<!-- CODE -->
<div class="sample">
<div class="tabs">
<ul class="tab_navi">
<li><a href="#first">高庵TOKYO</a></li>
<li><a href="#second">白レバー串みそ焼き</a></li>
<li><a href="#third">自家製さつま揚げ二種</a></li>
<li><a href="#fourth">白子の雲丹のせ炙り</a></li>
</ul>
<div id="first">
<img src="http://farm4.static.flickr.com/3166/3104684235_537e3463be_m.jpg" alt="" />
<h2>高庵TOKYO</h2>
<p>新宿三丁目にある焼酎と焼き鳥が美味しいお店。店内は、ほの暗い照明で、焼酎棚がライトアップされていておしゃれ。バーカウンターがメインで焼き鳥屋さんというよりシックなバーのような雰囲気★梅酒、焼酎、地酒の品揃えが豊富で珍しいものもあったり♪料理はどれも手が込んでいてお酒に合うメニューがいっぱいあります！</p>
</div>
<div id="second">
<img src="http://farm4.static.flickr.com/3203/3105515562_b203eee85a_m.jpg" alt="" />
<h2>白レバー串みそ焼き@高庵</h2>
<p>白レバーは、ほぼレア状態で口にいれるとふわっととろけます♪味噌ダレととっても合ってます。5本くらいはぺろりといけそうｗフォアグラステーキより美味しいかも！？</p>
</div>
<div id="third">
<img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_m.jpg" alt="" />
<h2>自家製さつま揚げ二種@高庵</h2>
<p>黒いのはしいたけじゃありませんｗさつま揚げです。箸で切らずに、そのまま揚げたてをぱくぱくいただくのが流儀のようです。味がしっかりついているので、このままいけます！</p>
</div>
<div id="fourth">
<img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_m.jpg" alt="" />
<h2>白子の雲丹のせ炙り@高庵</h2>
<p>白子にウニがたっぷりのってます★箸でつかむのがむずかしいくらい、お豆腐みたいにとろとろ！口に入れるとじゅわーっとうまみが広がります。あー幸せ！</p>
</div>
</div>
</div>
<!-- CODE / -->
</div>
</body>
</html>
