Jqueryを使用したタブスタイルのナビゲーションバー
質問
こんにちは、私はこの質問に対する答えを見つけようとしています。ロールオーバーを使用するjqueryを使用してナビゲーションバーを作成しようとしています。したがって、3つの異なるタブ/画像について、オン状態、オフ状態、クリック状態があります。
例: ホーム|サポート|について
私が持っている問題は、他の画像/タブが既にオン/クリック状態になっている場合に、クリック/オン状態にして、他の画像/タブをオフにすることです。嬉しいことに、各タブは、オンとオフを切り替える代わりに、クリックしたときにアクティブのままになります。
ここにコードがあります
$(document).ready(function() {
// Navigation rollovers
$("#nav a").mouseover(function(){
imgsrc = $(this).children("img").attr("src");
matches = imgsrc.match(/_on/);
// don't do the rollover if state is already ON
if (!matches) {
imgsrcON = imgsrc.replace(/_off.gif$/ig,"_on.gif"); // strip off extension
$(this).children("img").attr("src", imgsrcON);
}
});
$("#nav a").click(function(){
imgsrc = $(this).children("img").attr("src");
matchesclk = imgsrc.match(/_clk/);
if (!matchesclk) {
imgsrcClkON = imgsrc.replace(/_on.gif$/ig,"_clk.gif"); // strip off extension
$(this).children("img").attr("src", imgsrcClkON);
}
});
$("#nav a").mouseout(function(){
$(this).children("img").attr("src", imgsrc);
});
});
ご協力いただければ幸いです。私はjqueryが初めてであり、実際にこれに触れています。
解決
これはあなたのために働きますか?
<style>
.click
{
background-image: url(images/click.png);
}
.over
{
background-image: url(images/over.png);
}
</style>
$(document).ready(function()
{
$("#nav a").mouseover(function()
{
if($(this).attr("class") != "click")
$(this).addClass("over");
});
$("#nav a").click(function()
{
$("#nav a.click").removeClass("click");
$(this).addClass("click");
});
$("#nav a").mouseout(function()
{
$(this).removeClass("over");
});
});
<div id="nav">
<a>One</a>
<a>Tw0</a>
<a>Three</a>
</div>
他のヒント
代わりにCSSを試してください。スライディングドアテクニックに関する記事は次のとおりです。
http://www.alistapart.com/articles/slidingdoors/
編集クリック状態を適用する方法は次のとおりです(HTMLが有効な場合):
$(".yourLink").cick(function() {
$(".yourLink").removeClass("selected");
$(this).addClass("selected");
});
そして、「選択済み」を必ず定義してください。 CSSのクラス。
タブの外観に背景画像+ CSSを使用する場合(上記参照)、クラスを使用してさまざまなリンク状態を指定し、そこからCSSを調整することをお勧めします。例:
<div id="nav">
<a class="on" href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
</div>
<style type="text/css">
#nav a { color: blue; }
#nav a.on { color: red; }
#nav a.current { color: green; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#nav a').hover(
function(){ $(this).addClass('on'); },
function(){ $(this).removeClass('on'); }
);
});
</script>
その他
所属していません StackOverflow