JQueryを使ってcssを書き換え
何となくコードを見てさわる程度の初心者です。
以下のようなソースを組みました。
<div id="slide">
<a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a>
</div>
<div id="slidenavi">
<ul>
<li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li>
<li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li>
<li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li>
</ul>
</div>
#slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。
ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。
問題はここからです。
最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。
そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。
この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。
jsファイルは以下の通りです。
$(function(){
$('#slidenavi ul li a').fadeTo(0,0.4);
$('#slidenavi ul li a').hover(function(){
$(this).fadeTo(300,1.0);
},
function(){
$(this).fadeTo(300,0.4);
})
$('#slidenavi ul li img').mouseover(function(){
var bglink = $(this).attr("class");
var altTxt = $(this).attr("alt");
$("#slide img").attr("src","images/home/main/"+bglink);
$("#slide img").attr("alt",altTxt);
$("#slide span.active").css("display","block");
});
$('#slidenavi ul li a').mouseover(function(){
var Href = $(this).attr('href');
var Tget = $(this).attr('target');
$("#slide a").attr("href", Href);
$("#slide a").attr("target", Tget);
$("#slide a").click(function() {
window.open(Href,'_self');
return false;
});
});
});
お礼
ありがとうございます！！！！！！！ そう、これがやりたかったんです＾＾ ググってもなっかなか該当のが出てこず悩んでおりました。 おかげさまで無事にサイト更新できました！ 本当にありがとうございました。心よりお礼申し上げます。