タブの切替が.currentになった時に背景画像に_onがついた画像にしたい

Question

JQueryを使いタブの切替を行っています。
そのタブを押した時に「.current」が有効になりますが、
「.current」が有効になった時に、背景画像を各タブで
別々にしたいのですが、上手くいきません。
どうしたらよいでしょうか。
どうぞよろしくお願い致します。

<script>
$(function(){
    $('#contents section[id != "tab1"]').hide();
    $("#tab a").click(function(){
        $("#contents section").hide();
        $($(this).attr("href")).show();
        $(".current").removeClass("current");
        $(this).addClass("current");
        return false;
    });
 
});
</script>

<ul id="tab">
    <li><a href="#tab1" class="mtab1 current"></a></li>
    <li><a href="#tab2" class="mtab2"></a></li>
    <li><a href="#tab3" class="mtab3"></a></li>
</ul>

ul li a.mtab1 {
	background:url(../img/top/tab1.gif) no-repeat 0px 0px;
}
ul li a.mtab2 {
	background:url(../img/top/tab2.gif) no-repeat 0px 0px;
}
ul li a.mtab3 {
	background:url(../img/top/tab3.gif) no-repeat 0px 0px;
}
ul li a:hover{ opacity:0.8; }
ul li a.current { background-position:0px 0px }
/** ↓各タブが.currentになった時に背景画像に_onがついた画像にしたい**/
ul li a.mtab1 .current {
	background:url(../img/top/tab1_on.gif) no-repeat 0px 0px;
}
ul li a.mtab2 .current {
	background:url(../img/top/tab2_on.gif) no-repeat 0px 0px;
}
ul li a.mtab3 .current {
	background:url(../img/top/tab3_on.gif) no-repeat 0px 0px;
}

Answer 1

ul li a.mtab1.current {
    background:url(../img/top/tab1_on.gif) no-repeat 0px 0px;
}

その場合は、.mtab1と.currentをくっつけて書きます。

Comments

[fnwakc]

すごい速さで、解決しました。
未熟者で恐縮ですが、
大変助かりました。
ありがとうございます。