0

一度に1つのリンクをアクティブにしようとしています。私が持っているコードでは、すべてのリンクをクリックすると、すべてのリンクがアクティブになります。私は画像を使用しています。1つはデフォルト用、もう1つはホバー用、もう1つはアクティブ（3つの異なる画像）用で、背景色は必要ありません。これらの3つの画像はサイズが異なります。また、最初のリンクをアクティブにする必要があります。これどうやってするの？

HTML：

<ul id="navStandard">    
<li class="a"><a href="#"></a></li>
</ul>

<ul id="navQuick">
<li class="a"><a href="#"></a></li>
</ul> 

<ul id="navSurvey">
<li class="a"><a href="#"></a></li>
</ul>

jQuery：

$('#navStandard li').append('<div class="hover" />');
$('#navStandard li').hover(function() {
    $(this).children('div').stop(true, true).fadeIn('1000');
}, function() {
    $(this).children('div').stop(true, true).fadeOut('1000');
}).click(function() {
    $(this).addClass('selectedStandard');
});


$('#navQuick li').append('<div class="hover" />');
$('#navQuick li').hover(function() {
    $(this).children('div').stop(true, true).fadeIn('1000');
}, function() {
    $(this).children('div').stop(true, true).fadeOut('1000');
}).click(function() {
    $(this).addClass('selectedQuick');
});


$('#navSurvey li').append('<div class="hover" />');
$('#navSurvey li').hover(function() {
    $(this).children('div').stop(true, true).fadeIn('1000');
}, function() {
    $(this).children('div').stop(true, true).fadeOut('1000');
}).click(function() {
    $(this).addClass('selectedSurvey');
});

CSS：

#navStandard {
width: 115px;
height: 72px;
margin-right: 0px;
margin-bottom: 0px;
    margin-top: 1px;
padding: 0px;
 }
#navQuick {
width: 100px;
height: 73px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 1px;
padding: 0px;

}
#navSurvey {
width: 110px;
height: 73px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 1px;
padding: 0px;

}

#navStandard li{
float:left;
 width:115px;
height:72px;
    position:relative;
   background-image: url(standard-img.jpg); 
background-repeat: no-repeat;
background-position: center center;
display: inline;
 }
 #navStandard li a{
  z-index:20; 
display:block;
width: 120px;          
height:72px;        
position:relative;
}
#navStandard li .hover {
position:absolute;
width:115px;
height:72px;
z-index:0;
left:0;
top:0;

display:none;
background-image: url(over-standard.jpg);
background-repeat: no-repeat;
background-position: center center;

 }
#navStandard li.selectedStandard {
background-image: url(active-standard.jpg);
background-repeat: no-repeat;
background-position: center center; 
}


#navQuick li{
 float:left; 
 width:100px;
 height:72px;     
    position:relative;
    background-image: url(quick-img.jpg); 
background-repeat: no-repeat;
background-position: center center;
display: inline;
}
#navQuick li a{
z-index:20; 
display:block;
width: 100px;          
height:72px;        
position:relative;
}
#navQuick li .hover {
position:absolute;
width:100px;
height:72px;
z-index:0;
left:0;
top:0;
display:none;
background-image: url(over-quick.jpg);
background-repeat: no-repeat;
background-position: center center;

}
#navQuick li.selectedQuick {
background-image: url(active-quick.jpg);
background-repeat: no-repeat;
background-position: center center; 
}

#navSurvey {
width: 110px;
height: 72px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 1px;
padding: 0px;

}
#navSurvey {
width: 110px;
height: 72px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 1px;
padding: 0px;

}


#navSurvey li{
float:left; 
 width:110px;
height:72px;    
    position:relative;
    background-image: url(survey-img.jpg); 
background-repeat: no-repeat;
background-position: center center;
display: inline;
}
#navSurvey li a{
z-index:20;
   display:block;
   width: 110px;          
   height:72px;        
   position:relative;
   }
#navSurvey li .hover {
position:absolute;
width:110px;
height:72px;
z-index:0;
left:0;
top:0;
display:none;
background-image: url(over-survey.jpg);
background-repeat: no-repeat;
background-position: center center;

}
#navSurvey li.selectedSurvey {
background-image: url(active-survey.jpg);
background-repeat: no-repeat;
background-position: center center; 
}
4

2 に答える 2

1

1つのリンクのみをアクティブにしようとしている場合は、クリックした1人のユーザーに選択したものを追加する前に、他のすべてのli要素から選択した状態を削除する必要があります。

の線に沿った何か

$('#navSurvey li').hover(function() {
    $(this).children('div').stop(true, true).fadeIn('1000');
}, function() {
    $(this).children('div').stop(true, true).fadeOut('1000');
}).click(function() {
    $("#navStandard li").removeClass('selectedStandard');
    $("#navQuick li").removeClass('selectedQuick');
    $(this).addClass('selectedSurvey');
});

ただし、各要素に固有ではなく、一般的な選択状態を使用することをお勧めします。CSSでは、IDを使用してそれらをターゲットにすることができますが、JSをよりクリーンに保ち、繰り返しを少なくします。例えば

$('ul li').hover(function() {
    $(this).children('div').stop(true, true).fadeIn('1000');
}, function() {
    $(this).children('div').stop(true, true).fadeOut('1000');
}).click(function() {
    $("ul li").removeClass('selected');
    $(this).addClass('selected');
});

JQueryトリガーを使用してアンカークリックをトリガーできるようになります

$("#navStandard li a").trigger("click");
于 2012-06-03T22:08:59.413 に答える
0

$('#navStandard li a').click()そのリンクのクリックをシミュレートします。それはあなたが「活性化する」という意味ですか？

于 2012-06-03T22:08:19.420 に答える