「タブの切替 | よく使うjQuery」を改造してみた

タブの切替 | よく使うjQuery（finefinefine）よく出来ているのでもっと自分好みに改造してみた。

html

<div id="tabs">
    <ul id="tab">
        <li class="select"><a href="#tabs-1">メニュー 1</a></li>
        <li><a href="#tabs-2">メニュー 2</a></li>
        <li><a href="#tabs-3" class="last">メニュー 3</a></li>
    </ul>
    <div class="content_wrap">
        <p>メニュー 1 の内容。</p>
        <p>この実装例の、jQuery UI の CSS テーマは、デフォルトのテーマを読み込んで使っている。もちろん他の CSS テーマにも対応しているので、色々試してみるといい。</p>
    </div>
    <div class="content_wrap disnon">
        <p>メニュー 2 の内容。</p>
    </div>
    <div class="content_wrap disnon">
        <p>メニュー 3 の内容。</p>
    </div>
</div>
<p>http://www.finefinefine.jp/wp/sample/sample2.html<br>
http://liginc.co.jp/designer/archives/9179
</p>

javascript

IEのクリックした点線を消す。
clickよりもhoverが好きだ。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><!-- jquery　本体-->

<script type="text/javascript">  
<!--
$(document).ready(function(){
	$("#tab li a").bind("focus",function(){
		if(this.blur)this.blur();
	});
});

$(function() {
/*    $("#tab li").click(function() {*/
	$("#tab li").hover(function() {
        var num = $("#tab li").index(this);
        $(".content_wrap").addClass('disnon');
        $(".content_wrap").eq(num).removeClass('disnon');
        $("#tab li").removeClass('select');
        $(this).addClass('select')
    });
});
// -->
</script>

css

importantが沢山あるのは継承している関係だったりする。
色指定が16進数だったりnameだったり、、、

<style type="text/css">
#tabs {
/*    width:739px;*/
/*    margin:20px auto;*/
}
#tab{
float: left;
padding: 0; margin: 0;
border: 1px solid #b2b2b2;
border-bottom: none;
}

#tab li {
float: left;
padding: 0; margin: 0;
list-style: none!important;
cursor: pointer;
background-image: none!important;
background: rgb(1, 167, 189)!important;
}

#tab li.select a{
background-color: #fff!important;
color: #000!important;
}
#tab li a{
display:block;
color: #fff;
text-decoration: none;
padding: 1em;
/*　リストの数で調整する　*/
width: 213px;
}
#tab li a.last{
/*　最後のリストで微調整する　*/
width: 215px!important;
}
#tab li a:hover{background-color: #b2b2b2; color: white;}
#tab li a.selected{color: black;}

.disnon {display: none;}
.content_wrap {
clear: left;
color: black;
padding: 1em;
border: 1px solid #b2b2b2;
border-top: none;
background-color: white;
}
</style>