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

Question

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

Answer 1

为此你需要 javascript。您可以有 2 css class 个。单击菜单项时 class 名称会更改。这使用 Jquery 来简化操作。祝你好运。 See more

Answer 2

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
}

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

Toggle text glow in navbar?

javascript

jquery

toggle

glow

navbar