jqueryでタブを切り替えて表示します。

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script type="text/javascript" src="js/tab.js"></script> 

[tab.js]JavaScript

$(window).load(function() {
	$(".tabset").each(function(){
	var set = $(this);
	var btn = set.find("ul.tabset_tab li a");
	var setpael = set.find("ul.tabset_tab li a.select");
	var panel = set.find(".tabset_panel>div");
	var setpanelID = $(setpael).attr("href");
	//パネル初期設定
	$(panel).hide().attr("aria-hidden","true");
	$(btn).attr({"aria-selected":"false","tabindex":"-1"});
	$(setpael).attr({"aria-selected":"true","tabindex":"0"});
	$(".tabset_panel div"+setpanelID).show().attr("aria-hidden","false");
	  //アクション
		$(btn).click(function(){
		$(btn).removeClass("select").attr("aria-selected","false");
		$(this).addClass("select").attr("aria-selected","true");
		$(panel).hide().attr("aria-hidden","true");
		$($(this).attr("href")).show().attr("aria-hidden","false");
		//return false;
		});
// 矢印キーで移動
$('[role="tab"]').on('keydown', function(e) {
  var $original = $(this);
  var $prev = $(this).parents('li').prev().children('[role="tab"]');
  var $next = $(this).parents('li').next().children('[role="tab"]');
  var $target;
  switch (e.keyCode) {
    case 37:
      $target = $prev;
      break;
    case 39:
      $target = $next;
      break;
    default:
      $target = false
      break;
  }
  if ($target.length) {
      $original.attr({
        'tabindex' : '-1',
        'aria-selected' : null
      });
      $target.attr({
        'tabindex' : '0',
        'aria-selected' : true
      }).focus();
  }
	});
	});
});

HTMl

<div class="tabset">
<ul class="tabset_tab" role="tablist">
<li><a href="#tab1" class="select" role="tab" aria-controls="tab1"><span>メニュー[1]</span></a></li>
<li><a href="#tab2" role="tab" aria-controls="tab2"><span>メニュー[2]</span></a></li>
<li><a href="#tab3" role="tab" aria-controls="tab3"><span>メニュー[3]</span></a></li>
<li><a href="#tab4" role="tab" aria-controls="tab4"><span>メニュー[4]</span></a></li>
<li><a href="#tab5" role="tab" aria-controls="tab5"><span>メニュー[5]</span></a></li>
</ul>

<div class="tabset_panel">
<div tablidex="0" id="tab1" role="tabpanel">
<div>
<p><strong>メニュー[1]</strong><br />
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。<br />
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。</p>
</div>
</div>
<div tablidex="0" id="tab2" role="tabpanel">
<div>
<strong>メニュー[2]</strong><br />
<img src="img/img.gif" width="282" height="129" alt="イメージ図" /><br />
図も入れてみたり～</div>
</div>
<div tablidex="0" id="tab3" role="tabpanel">
<div>
<strong>メニュー[3]</strong><br />
説明文が入ります。説明文が入ります。説明文が入ります。<a href="">説明文が入ります。</a>説明文が入ります。説明文が入ります。<br />
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。
<p><a href="">リンク</a></p>
</div>
</div>
<div tablidex="0" id="tab4" role="tabpanel">
<div>
<strong>メニュー[4]</strong><br />
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。<br />
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。
</div>
</div>
<div tablidex="0" id="tab5" role="tabpanel">
<div>
<strong>メニュー[5]</strong><br />
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。<br />
説明文が入ります。説明文が入ります。説明文が入ります。説明文が入ります。
</div>
</div>
</div>
<!--tabset_end--></div>

CSS

/* tab */
.tabset{
	width:500px;
}
.tabset_tab li{
	width:100px;
	height:30px;
	float:left;
	text-align:center;
	line-height:30px;
}
.tabset_tab li a{
	display:block;
	outline:none; /* linkline */
	background-color:#F3F2ED;
	border-bottom:solid 1px #91A5B2;
}
.tabset_tab li a span{
	display:block;
	background:transparent url('img/tab_topbk.gif') no-repeat left top scroll;
}
.tabset_tab li a:hover{text-decoration:none;background-color:#F8F9E4;}
.tabset_tab li a:focus{outline:1px #000 dotted;}
.tabset_tab li a.select{
	text-decoration:none;
	color:#000;
	font-weight:bold;
	background:#FFF url('img/tab_bk_on.gif') no-repeat left top scroll;
	border-bottom:none;
}


/* panel */
.tabset_panel{
	width:500px;
	clear:both;
	padding:0 0 5px 0;
	background:#FFF url('img/tabpanel_bk.gif') no-repeat left bottom scroll;
}
.tabset_panel>div{
	padding:10px 10px 5px 10px;
	border-left:solid 1px #91A5B2;
	border-right:solid 1px #91A5B2;
}