ファイル構成

index.htmlHTMLのタグのみで、JavaScriptやCSSは外部ファイルで読み込みです。
selector.jsタブをクリックしたときの動きを扱う用のJavaScriptです。
selector.css今回のタブ用のCSSです。

コード

index.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Contents-Script-Type" content="text/javascript" />
<title>タブ-test</title>
<link href="css/selector.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/selector.js"></script>
</head>

<body>
<div id="tab-box">

<ul id="nav" class="clearFix">
<li><a href="#tab1"><img src="img/pict1.png" width="96" height="127" /></a></li>
<li><a href="#tab2"><img src="img/pict2.png" width="95" height="127" /></a></li>
<li><a href="#tab3"><img src="img/pict3.png" width="96" height="127" /></a></li>
<li><a href="#tab4"><img src="img/pict4.png" width="96" height="127" /></a></li>
</ul>

<!--タブ内容-->
<div id="tab1">タブ1</div>
<div id="tab2">タブ2</div>
<div id="tab3">タブ3</div>
<div id="tab4">タブ4</div>

</div><!-- / #tab-box -->

</body>
</html>

selector.js


// JavaScript Document
    $(function(){  
        var handler = $('ul#nav li a');  
        var url = document.URL;  
        var urlId = url.substr(url.lastIndexOf('#'));  
        var urlIdJudgment = urlId.lastIndexOf('#');  
        $('ul#nav').each(function(){  
            $('#tab-box > div:first').show();  
                var imgSrc = $('ul#nav li:first img').attr('src');  
                var imgDot = imgSrc.lastIndexOf('.');  
                var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);  
                $('ul#nav li:first img').attr('src',onSrc).addClass('tab-on');  
        });  
        // クリック時の動作  
        handler.click(function() {  
            // クリックしたタブ画像をオンの状態に(replaceなのでファイル名に_oをつけたす)
            var imgSrc = $(this).children('img').attr('src').replace(/_o/g, "");  
            var imgDot = imgSrc.lastIndexOf('.');  
            var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);  
            $(this).children('img').attr('src',onSrc);  
            // タブ画像の切り替え(演算子で_oをファイル名に付け足す)
            var imgOff = $('ul#nav li img.tab-on').attr('src').replace(/_o/g, "");  
            $('ul#nav li img.tab-on').attr('src',imgOff);  
            $('ul#nav li img').removeClass('tab-on');  
            $(this).children('img').addClass('tab-on');  
            // コンテンツの切り替え  
            var clickAttr = $(this).attr('href');  
            var showAttr = '#' + $('#tab-box > div:visible').attr('id');  
            if(clickAttr !== showAttr) {  
                $('#tab-box > div:visible').hide();  
                var showDiv = '#tab-box div' + clickAttr;  
                $(showDiv).show();  
                return false;  
            }  
            else {  
                // 何度もクリックした場合もタブ画像をオンの状態に(演算子で_oをファイル名に付け足す)
                var imgSrc = $(this).children('img').attr('src').replace(/_o/g, "");  
                var imgDot = imgSrc.lastIndexOf('.');  
                var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);  
                $(this).children('img').attr('src',onSrc);  
                return false;  
            }  
        })  
        // ロールオーバー(演算子で_oをファイル名に付け足す)
        handler.hover(function() {  
            var classJudgment = $(this).children('img').attr('class');  
            if(classJudgment != 'tab-on') {  
                var imgSrc = $(this).children('img').attr('src');  
                var imgDot = imgSrc.lastIndexOf('.');  
                var onSrc = imgSrc.substr(0, imgDot) + '_o' + imgSrc.substr(imgDot, 4);  
                $(this).children('img').attr('src',onSrc);  
            }  
        }, function() {
            var classJudgment = $(this).children('img').attr('class');  
            if(classJudgment != 'tab-on') {  
                var imgOff = $(this).children('img').attr('src').replace(/_o/g, "");  
                $(this).children('img').attr('src',imgOff);  
            }  
        });  
    });

selector.css


@charset "UTF-8";
/* CSS Document */
    #tab-box ul {
    width: 766px;
    margin: 0px;
    padding: 0;
    list-style: none;
    margin: 0px;
    }  
    #tab-box ul li {  
    margin-right:0px;  
    float:left;  
    display:inline;  
    font-size:0;
    margin-right: 2px;
    }  

    #tab-box ul li a img{  
    outline:none;  
    border:none;  
    }  

    #tab-box div {
    display:none;
    width:390px;
    height: 100px;
    background:#CCCCCC;
    }

    .clearFix:after{  
    display:block;  
    clear:both;  
    height:0;  
    visibility:hidden;  
    content:".";  
    zoom:1;  
    }