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

Posted 2023-03-16

【中文标题】如果单击具有淡入淡出效果的其他链接，则切换类名并删除

【英文标题】：Toggle classname and remove if clicked on other link with fadein , fadeout effect

【发布时间】：2012-11-07 08:53:00

【问题描述】：

这是我有的东西

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

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

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

如果Link A 处于活动状态（即颜色为红色），单击Link B 将使Link A 和Text A 样式变为原始样式，Link B 将变为红色，text B 的颜色将随着淡入淡出效果。

这有意义吗？

谢谢

【参考方案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 acolor:#000;
    #links a.activecolor: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/

【讨论】：

感谢您的回复。但是 Tahir，链接没有切换，就像当我点击链接 A 时它变成红色，但在再次点击链接 A 后没有任何反应。我也希望它在第二次点击时保持原始风格...

但是代码没有问题/错误，它的工作就像一个魅力。将上面提供的整个代码复制/粘贴到一个新的 html 文件中并保存，它将起作用。检查您的代码的任何其他问题。

哦，塔希尔，我做到了。但我遇到的问题是它应该具有切换效果。您的代码中没有哪个.. 无论如何感谢您的努力 Tahir :)