[英]How to stop javascript fading out element already selected
嗨,我有以下代碼,允許用戶在3個選項卡之間交換,它通過淡入和淡出顯示和隱藏div,我希望這樣做,以便如果在導航欄上選擇了當前選項卡,它不會淡入和淡出再次,相反,我希望它什么也不做。
這是代碼:
HTML:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="220px">
<p align="left"><table width="220px" cellspacing="0" cellpadding="0">
<tr>
<td class="mya_nav" style="border-color: #B23387;">
<a id="show_personal">Personal</a>
</td>
</tr>
<tr>
<td class="mya_nav" style="border-color: #00c6ff;">
<a id="show_favourites">Favourites</a>
</td>
</tr>
<tr>
<td class="mya_nav" style="border-color: #00e60b;">
<a id="show_history">History</a>
</td>
</tr>
</table>
</p>
</td>
<td width="675px">
<div id="content">
<div id="personal" <?php echo $personal_current; ?>>
<p align="center">Personal</p>
</div>
<div id="favourites" <?php echo $favourite_current; ?>>
<p align="center">Favourites</p>
</div>
<div id="history" <?php echo $recent_current; ?>>
<p align="center">History</p>
</div>
</div>
</td>
</tr>
</table>
JS:
<script>
$('p a').click(function(){
var id = $(this).html().toLowerCase();
$('.current').fadeOut(600, function(){
$('#'+id).fadeIn(600);
$('.current').removeClass('current');
$('#'+id).addClass('current');
});
});
</script>
$('p a').click(function(){
var id = $(this).html().toLowerCase();
if (this.not(':focus')) {
$('.current').fadeOut(600, function(){
$('#'+id).fadeIn(600);
$('.current').removeClass('current');
$('#'+id).addClass('current');
});
});
你可以試試
<script>
$('p a').click(function(){
var id = $(this).html().toLowerCase();
if($('.current').attr('id')!=id){
$('.current').fadeOut(600, function(){
$('#'+id).fadeIn(600);
$('.current').removeClass('current');
$('#'+id).addClass('current');
});
}
});
</script>
如果.current指向當前顯示的選項卡,則只需單擊它即可,只需檢查單擊的項是否為當前項即可將其忽略。 如果item類包含當前 元素,則jQuery的hasClass將返回true,否則返回false。
if(!$('#'+id).hasClass('current')){
$('.current').fadeOut(600, function(){
$('#'+id).fadeIn(600);
$('.current').removeClass('current');
$('#'+id).addClass('current');
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.