嗨,我有以下代码允许用户在 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>