ホーム » ブログ » jqueryでタブを切り替えDemo
このエントリーをはてなブックマークに追加
@2014/05/27

スポンサーリンク
毎回ネットでサンプルを探しことはもったいないから、ここで【jqueryでタブを切り替え】実例のソースをメモする。
何も修正しなくて、コピーするだけでそのまま使える。

Demo:http://www.zanmai.net/test/demo/tabnavi.html 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jqueryタブナビゲーションサンプル</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
.full_content {
        width:548px;
        height:380px;
        position:relative;
        margin:0 auto;
        clear:both;	
}

ul {
        padding:0;
        margin:0;
}
ul li:first-child {
        margin-left:0;
}

ul li{
        width:100px;
        height:25px;
        background:#9C9;
        float:left;
        list-style:none;
        padding:10px 0 0;
        margin-left:12px;
        text-align:center;
        display:block;
        cursor: pointer;
	font-weight:bold; 
   	border-top-left-radius: 6px;
  	border-top-right-radius: 6px;
   	background:      -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
   	background:     -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
   	background:    -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
   	background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
   	background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
}

.active, .hover {
        background:#6CC;
        font-weight:bold;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
	text-shadow: 0px -1px 10px gold,1px 0px 10px gold,0px 1px 10px gold,-1px 0px 10px gold;
	color: white;
}

.content {
        width:518px;
        height:320px;
        border:#6CC 5px solid;
        top:32px;
        left:0;
        padding:10px;
        position:absolute;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
}

</style>
<script type="text/javascript">
$ (function(){
	// 全ての非活性liに対するのコンテンツを隠す
        $ (".content:not('li.active + .content')").hide(); 
	// liタブのOn&Off
        $("li").hover(
		// liタブをマウスOn
		function(){$ (this).addClass("hover")},
		// liタブをマウスOff
        	function(){$(this).removeClass("hover")}
	); 
	// liタブのクリック
        $ ("li").click(function(){
		// 全ての.activeクラスをクリア
                $("li").removeClass("active");
		// クリックされたliを.activeクラスを付ける
                $ (this).addClass("active");
		// 全ての非活性liに対するのコンテンツを隠す
                $(".content:not('li.active + .content')").fadeOut();
		// 活性状態のliに対するコンテンツを表示
       		$ ("li.active + .content").fadeIn();    
        });
});
</script>

</head>
<body>

<div class="full_content">
	<ul>
	   <li class="active">ホーム</li>
	      <div class="content">
	      ここに内容が入ります。 (ホーム)    
	      </div> 
	      
	   <li>画像</li>
	      <div class="content">
	　　　 	<img src="http://www.zanmai.net/images/favicon.ico">画像アリア
	　　　 </div>
	 
	   <li>リンク</li>
	      <div class="content">
	      powered by <a href="http://www.matao.me" target="_blank">www.matao.me</a>
	      </div>
	   
	   <li>入力</li>
	      <div class="content">
	      ここに内容が入ります。(入力)
	      backgroup:url("/media/img/firefox/desktop/tips/sprite-tabs.png") no-repeat scroll left -84px rgba(0, 0, 0, 0)
	      </div>
	    
	   <li>テーブル</li>
	      <div class="content">
	      ここに内容が入ります。(テーブル)
	      </div>     
	</ul>
</div>

</body>
</html>

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
0人
このエントリーをはてなブックマークに追加


★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。
閲覧履歴(直近10件)


◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/199.html

閉じる

※お名前：

 

※EMAIL：

 

URL：

 

※認証コード：

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ！

check