JavaScript + Ajax 実践サンプル集 - jQueryのAPIを利用したタブ型ページ

jQueryのAPIを利用したタブ型ページ

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、スタイルシートとjQueryを使用してタブ型ページを実装しています。タブをクリックするとコンテンツが切り替わります。

このサンプルで使用しているイメージです。イメージを右クリックしてダウンロードしてください。

#gallery div.off
{
  color: #000;
  height: 33px;
  margin-right: 2px;
  line-height: 33px;
  padding: 0 20px;
  float: left;
  background: url(tabs_0.gif) repeat-x left bottom;
  border: 1px solid #ddd;
  border-bottom-color: #000;
  cursor: pointer;
  position: relative;
  z-index: 20;
}
#gallery div.on
{
  color: #c00;
  padding: 0 20px;
  margin-right: 2px;
  margin-top: 1px;
  float: left;
  background: url(tabs_2.gif) repeat-x left bottom;
  border: 1px solid #000;
  cursor: pointer;
  border-bottom: 0;
  height: 33px;
  line-height: 32px;
  position: relative;
  z-index: 100;
}

<!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">
<head>
<title>CSS Menu - Tabbled Pages (jQuery)</title>
<link href="DhtmlAdvanced/cssMenuTabbedPages/tabbed_pages.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $('#gallery div').click(function() {    
    $('.on').removeClass('on').addClass('off');
    $(this).removeClass('off').addClass('on');

$('.show').removeClass('show').addClass('hide');
    $('#' + $(this).attr('title')).removeClass('hide').addClass('show');
  });
});  
</script>
</head>
<body>

<div id="gallery">
  <div class="on" title="Constable">
    <span>John Constable</span></div>
  <div class="off" title="Monet">
    <span>Claude Monet</span></div>
  <div class="off" title="Vincent">
    <span>Vincent Van Gogh</span></div>
  <div class="off" title="Chagall">
    <span>Marc Chagall</span></div>
  <div class="off" title="Picasso">
    <span>Pablo Picasso</span></div>
</div>

<div id="Constable" class="show">
  <p>
    Although he showed an early talent for art and began painting his native Suffolk
    scenery before he left school, his great originality matured slowly.</p>
  <img src="DhtmlAdvanced/cssMenuTabbedPages/constable.jpg" alt="The Hay Wain" title="The Hay Wain" />
  <br class="clear" />
</div>

<div id="Monet" class="hide">
  <p>
    His youth was spent in Le Havre, where he first excelled as a caricaturist but was
    then converted to landscape painting by his early mentor <a href="http://www.ibiblio.org/wm/paint/auth/boudin/">
      Boudin</a>, from whom he derived his firm predilection for painting out of doors.</p>
  <img src="DhtmlAdvanced/cssMenuTabbedPages/monet.jpg" alt="Women in the Garden" title="Women in the Garden" />
  <br class="clear" />
</div>

<div id="Vincent" class="hide">
  <p>
    Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890,
    Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and
    draughtsman after <a href="http://www.ibiblio.org/wm/paint/auth/rembrandt/">Rembrandt</a>.</p>
  <img src="DhtmlAdvanced/cssMenuTabbedPages/vincent.jpg" alt="The Starry Night" title="The Starry Night" />
  <br class="clear" />
</div>

<div id="Chagall" class="hide">
  <img src="DhtmlAdvanced/cssMenuTabbedPages/chagall.jpg" alt="Adam and Eve" title="Adam and Eve" />
  <p>
    Russian-born French painter. Born to a humble Jewish family in the ghetto of a large
    town in White Russia, Chagall passed a childhood steeped in Hasidic culture.</p>
  <br class="clear" />
</div>

<div id="Picasso" class="hide">
  <img src="DhtmlAdvanced/cssMenuTabbedPages/picasso.jpg" alt="Girtl in front of mirror" title="Girtl in front of mirror" />
  <p>
    Pablo Picasso, born in Spain, was a child prodigy who was recognized as such by
    his art-teacher father, who ably led him along.</p>
  <br class="clear" />    
</div>
  
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
$(function() {
  $('#gallery div').click(function() {    
    $('.on').removeClass('on').addClass('off');
    $(this).addClass('on');

    $('.show').removeClass('show').addClass('hide');
    $('#' + $(this).attr('title')).removeClass('hide').addClass('show');
  });
});

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
#gallery
{
  font: 11px verdana,arial,sans-serif;
  width: 750px;
  padding: 15px 0 0 0;
  line-height: 15px;
}
#gallery div.off
{
  color: #000;
  height: 33px;
  margin-right: 2px;
  line-height: 33px;
  padding: 0 20px;
  float: left;
  background: url(tabs_0.gif) repeat-x left bottom;
  border: 1px solid #ddd;
  border-bottom-color: #000;
  cursor: pointer;
  position: relative;
  z-index: 20;
}
#gallery div.on
{
  color: #c00;
  padding: 0 20px;
  margin-right: 2px;
  margin-top: 1px;
  float: left;
  background: url(tabs_2.gif) repeat-x left bottom;
  border: 1px solid #000;
  cursor: pointer;
  border-bottom: 0;
  height: 33px;
  line-height: 32px;
  position: relative;
  z-index: 100;
}

div.hide
{
  display: none;
  width: 0;
  overflow: hidden;
}
div.show
{
  clear: left;
  background: #fff;
  width: 708px;
  margin-top: 0;
  top: -1px;
  border: 1px solid #000;
  padding: 20px;
  position: relative;
  z-index: 50;
  font: 11px verdana, arial, sans-serif;
  line-height: 18px;
}
div.show img
{
  float: left;
  margin: 0 10px 10px 0;
}
.clear
{
  clear: both;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="DhtmlAdvanced/cssMenuTabbedPages/tabbed_pages.css" rel="stylesheet" type="text/css" />
<script src="DhtmlAdvanced/jquery-1.3.1.js" type="text/javascript"></script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div id="gallery">
  <div class="on" title="Constable">
    <span>John Constable</span></div>
  <div class="off" title="Monet">
    <span>Claude Monet</span></div>
  <div class="off" title="Vincent">
    <span>Vincent Van Gogh</span></div>
  <div class="off" title="Chagall">
    <span>Marc Chagall</span></div>
  <div class="off" title="Picasso">
    <span>Pablo Picasso</span></div>
</div>

<div id="Constable" class="show">
  <p>
    Although he showed an early talent for art and began painting his native Suffolk
    scenery before he left school, his great originality matured slowly.</p>
  <img src="DhtmlAdvanced/cssMenuTabbedPages/constable.jpg" alt="The Hay Wain" title="The Hay Wain" />
  <br class="clear" />
</div>

<div id="Monet" class="hide">
  <p>
    His youth was spent in Le Havre, where he first excelled as a caricaturist but was
    then converted to landscape painting by his early mentor <a href="http://www.ibiblio.org/wm/paint/auth/boudin/">
      Boudin</a>, from whom he derived his firm predilection for painting out of doors.</p>
  <img src="DhtmlAdvanced/cssMenuTabbedPages/monet.jpg" alt="Women in the Garden" title="Women in the Garden" />
  <br class="clear" />
</div>

<div id="Vincent" class="hide">
  <p>
    Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890,
    Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and
    draughtsman after <a href="http://www.ibiblio.org/wm/paint/auth/rembrandt/">Rembrandt</a>.</p>
  <img src="DhtmlAdvanced/cssMenuTabbedPages/vincent.jpg" alt="The Starry Night" title="The Starry Night" />
  <br class="clear" />
</div>

<div id="Chagall" class="hide">
  <img src="DhtmlAdvanced/cssMenuTabbedPages/chagall.jpg" alt="Adam and Eve" title="Adam and Eve" />
  <p>
    Russian-born French painter. Born to a humble Jewish family in the ghetto of a large
    town in White Russia, Chagall passed a childhood steeped in Hasidic culture.</p>
  <br class="clear" />
</div>

<div id="Picasso" class="hide">
  <img src="DhtmlAdvanced/cssMenuTabbedPages/picasso.jpg" alt="Girtl in front of mirror" title="Girtl in front of mirror" />
  <p>
    Pablo Picasso, born in Spain, was a child prodigy who was recognized as such by
    his art-teacher father, who ably led him along.</p>
  <br class="clear" />    
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQueryのAPIを利用したタブ型ページ

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQueryのAPIを利用したタブ型ページ

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!