2011年07月06日

jquery で css 簡単タブ

お願いします♪いいねとかつぶやいたりして下さい
 
2012/05/02 追記

<script type="text/javascript">  
  
    $(function() {  
        $('.tabclear li').click(function(){  
            $('.tabclear li').each(function(){  
                $(this).removeClass('current');  
            });  
            $(this).addClass('current');
			
        });  
          
          
        $(".tabclear li a").click(function() {  
         id = $(this).attr("id"); // idの取得  
  			 
			 $(".tabcont > div").hide();
			 $("#cont-" + id).show();
		
        });  
  
    });  
  
</script>

<style type="text/css">

.tabcont > div {
	display:none;	
}

.tabcont > .current {
	display:block;	
}

</style>

<!-- タブコンテンツ -->
<div class="tabcont">
	<div id="cont-0" class="current">
    	000
    </div>
    <div id="cont-1">
    	1111
    </div>
</div>


<ul class="tab tabclear">  
    <li class="current"><a href="#" class="blue" id="0">確認</a></li>  
    <li><a href="#" class="red" id="1">報告</a></li>
</ul>




jqueryでタブを作ろうと思ってもなんかこってりしたプログラムしか置いてなかったりするので、
cssだけで作ってみることにした。

追記

liに current をつけるのではなく、 a に activeをつけたほうがよいかもしれない。

ul.tab a.active {
	background-color:#ffffcc;
	display:block;
	border-top: 10px;
	margin-bottom:2px;
	font-weight: bold;
}



<script type="text/javascript">
//現在のページをハイライト
$("a").each(function(){
	if($(this).attr("href")==location.pathname)
	$(this).toggleClass("active");
});
</script>

<ul class="tab tabclear">  
    <li><a href="/sponcers/add/" class="blue" id="tab0">一般サイト</a></li>  
    <li><a href="/sponcers/add/1/" class="pink" id="tab1">18歳以上対象サイト</a></li>  
</ul>




参考
http://weble.org/2011/05/24/html-css-tab

ありがとうございました。

上記だけでCSSだけのタブはすぐできる。
で、上記をAJAXに対応してみました。

CSS
/* タブ */
ul.tab {
	margin: 0;
	padding: 0;
	border-bottom: 2px #ddd solid;
}
ul.tab li {
	float: left;
	margin: 0 0 0 5px;
	position: relative;
	bottom: -2px;
	list-style-type: none;
	border: 1px #ddd solid;
	border-top: none;
	border-bottom: 2px #ddd solid;
}
ul.tab li.current {
	border-bottom: 2px #fff solid;
	font-weight: bold;
}
ul.tab li a {
	color: #000;
	display: block;
	padding: 3px 10px 5px;
	text-decoration: none;
	background: #fff;
}
ul.tab li a.blue {
	border-top: 5px #2384dc solid;
}
ul.tab li a.green {
	border-top: 5px #4cbb47 solid;
}
ul.tab li a.red {
	border-top: 5px #dd1d25 solid;
}
ul.tab li a.yellow {	
	border-top: 5px #ffd242 solid;
}
ul.tab li a:hover {
	position: relative;
	bottom: 6px;
}



<script type="text/javascript">

	$(function() {
		$('.tabclear li').click(function(){
			$('.tabclear li').each(function(){
				$(this).removeClass('current');
			});
			$(this).addClass('current');
			
		});
		
		
		$(".tabclear li a").click(function() {
		 id = $(this).attr("id"); // idの取得

		});

	});

</script>

<ul class="tab tabclear">
	<li><a href="#" class="blue" id="tab0">タブ1</a></li>
	<li class="current"><a href="#" class="red" id="tab1">タブ2</a></li>
	<li><a href="#" class="green" id="tab2">タブ3</a></li>
	<li><a href="#" class="yellow" id="tab3">タブ4</a></li>
</ul>



こんな感じ。
関連するタグ: CSS javascript
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ