JQueryを使いタブの切替を行っています。
そのタブを押した時に「.current」が有効になりますが、
「.current」が有効になった時に、背景画像を各タブで
別々にしたいのですが、上手くいきません。
どうしたらよいでしょうか。
どうぞよろしくお願い致します。
javascript
1<script> 2$(function(){ 3 $('#contents section[id != "tab1"]').hide(); 4 $("#tab a").click(function(){ 5 $("#contents section").hide(); 6 $($(this).attr("href")).show(); 7 $(".current").removeClass("current"); 8 $(this).addClass("current"); 9 return false; 10 }); 11 12}); 13</script>
html
1<ul id="tab"> 2 <li><a href="#tab1" class="mtab1 current"></a></li> 3 <li><a href="#tab2" class="mtab2"></a></li> 4 <li><a href="#tab3" class="mtab3"></a></li> 5</ul>
css
1ul li a.mtab1 { 2 background:url(../img/top/tab1.gif) no-repeat 0px 0px; 3} 4ul li a.mtab2 { 5 background:url(../img/top/tab2.gif) no-repeat 0px 0px; 6} 7ul li a.mtab3 { 8 background:url(../img/top/tab3.gif) no-repeat 0px 0px; 9} 10ul li a:hover{ opacity:0.8; } 11ul li a.current { background-position:0px 0px } 12/** ↓各タブが.currentになった時に背景画像に_onがついた画像にしたい**/ 13ul li a.mtab1 .current { 14 background:url(../img/top/tab1_on.gif) no-repeat 0px 0px; 15} 16ul li a.mtab2 .current { 17 background:url(../img/top/tab2_on.gif) no-repeat 0px 0px; 18} 19ul li a.mtab3 .current { 20 background:url(../img/top/tab3_on.gif) no-repeat 0px 0px; 21}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/12 03:15