PHP & JavaScript Room :: 設置サンプル

実行結果

エフェクト操作:基本:show()、hide()の使用例 | jQuery

▼マウスオーバーするとタブが切り替わります。

高庵TOKYO

新宿三丁目にある焼酎と焼き鳥が美味しいお店。店内は、ほの暗い照明で、焼酎棚がライトアップされていておしゃれ。バーカウンターがメインで焼き鳥屋さんというよりシックなバーのような雰囲気★梅酒、焼酎、地酒の品揃えが豊富で珍しいものもあったり♪料理はどれも手が込んでいてお酒に合うメニューがいっぱいあります!

白レバー串みそ焼き@高庵

白レバーは、ほぼレア状態で口にいれるとふわっととろけます♪味噌ダレととっても合ってます。5本くらいはぺろりといけそうwフォアグラステーキより美味しいかも!?

自家製さつま揚げ二種@高庵

黒いのはしいたけじゃありませんwさつま揚げです。箸で切らずに、そのまま揚げたてをぱくぱくいただくのが流儀のようです。味がしっかりついているので、このままいけます!

白子の雲丹のせ炙り@高庵

白子にウニがたっぷりのってます★箸でつかむのがむずかしいくらい、お豆腐みたいにとろとろ!口に入れるとじゅわーっとうまみが広がります。あー幸せ!

設置サンプルのソース

<!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 &amp; 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本くらいはぺろりといけそうwフォアグラステーキより美味しいかも!?</p>
       </div>
       <div id="third">
         <img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_m.jpg" alt="" />
           <h2>自家製さつま揚げ二種@高庵</h2>
         <p>黒いのはしいたけじゃありませんwさつま揚げです。箸で切らずに、そのまま揚げたてをぱくぱくいただくのが流儀のようです。味がしっかりついているので、このままいけます!</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>