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>
こんな感じ。
