toggle - 如果单击具有淡入淡出效果的其他链接，则切换类名并删除

Question

这是我有的东西

link A  Text A    
link B  Text B   
link C  Text C   

当有人点击 时Link A，它的颜色变为红色，文本 A 的颜色也应该随着淡入/淡出效果而改变。

再次单击Link A将使链接和文本恢复到以前的样式

如果Link A处于活动状态（即颜色为红色），单击Link B将使样式变为原始样式Link A并将变为红色，并且颜色将随着淡入/淡出效果而变化。Text ALink Btext B

这有意义吗？

谢谢

Answer 1

这是一个没有淡入淡出效果的简单解决方案。

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#links a').click(function(){
            toggle_link_class(this);
        });

        function toggle_link_class(a){
            $('#links a').removeClass('active'); 
            $('#links a').addClass('inactive'); 
            $(a).toggleClass('inactive active');
        }
    });
</script>

<style>
    #links a{color:#000;}
    #links a.active{color:red;}
</style>

<div id="links">
    <a href="#a">Link A</a> <br />
    <a href="#b">Link B</a> <br />
    <a href="#c">Link C</a> 
</div>

你可以试试下面的“彩色动画库”

http://www.bitstorm.org/jquery/color-animation/