在导航栏中切换文本发光？答案

【问题标题】：Toggle text glow in navbar?在导航栏中切换文本发光？
【发布时间】：2015-04-20 23:56:39
【问题描述】：

大家好，这里是新手。我已尽力通过搜索找到一个简单的解决方案，但我没有遇到任何对我有用的东西。我的网站使用隐藏/显示 div 的导航栏来“更改页面”（全部包含在一个 HTML 文件中），目前没有视觉指示这些项目中的哪一个是当前页面。我怎样才能做到这一点，以便在单击菜单项时在该项目上启用文本发光效果（我假设是 CSS3 效果）并关闭所有其他菜单项上的文本发光？感谢您的帮助！

【问题讨论】：

回答的太多了，有例子或链接吗？如果没有，您可能想尝试这样的事情：jsfiddle.net/joshnh/YxRqp

标签： javascript jquery toggle navbar glow

【解决方案1】：

JsFiddle：http://jsfiddle.net/usd6v5kp/1/

HTML：

 <html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css">
    <title></title>
</head>
<body>
    <p id="Test1" onclick="glow1()">ITEM ONE</p>
    <p id="Test2" onclick="glow2()">ITEM TWO</p>
    <p id="Test3" onclick="glow3()">ITEM THREE</p>
</body>
</html>

JQuery:

function glow1() {

        $('#Test1').addClass('class1');
        $('#Test2').removeClass('class1');
        $('#Test3').removeClass('class1');
        }



    function glow2() {


        $('#Test2').addClass('class1');
        $('#Test1').removeClass('class1');
        $('#Test3').removeClass('class1');
        }

    function glow3() {

        $('#Test3').addClass('class1');
        $('#Test1').removeClass('class1');
        $('#Test2').removeClass('class1');
        }

CSS：

 .class1 {
    text-shadow: 0 0 12px #ff0000
}

【讨论】：

嘿，我知道这个问题已经有一年了，但我意识到我忘了把这个答案标记为正确，因为我最终使用了这个。实际上，我通过为每个列表项赋予相同的类来进一步简化它，因此当调用该函数时，它从技术上从每个项中删除“活动”类，然后将其应用于单击的项。 function glow1() { $('.list-item').removeClass('activeClass'); $('#list-item-1').addClass('activeClass'); }

【解决方案2】：

为此，您需要 javascript。你可以有 2 个 CSS 类。单击菜单项时，类名称会更改。这使用 Jquery 使它变得容易。祝你好运。 See more

【讨论】：