Search code examples
javascriptjquerytogglenavbarglow

Toggle text glow in navbar?

Hello all, newbie here. I have tried my best to find a simple solution through searching, but I have not come across anything that works for me. My site uses a navbar that hides/shows divs to "change the page" (all contained in one HTML file) and currently there is no visual indicator of which of these items is the current page. How can I make it so that when a menu item is clicked, a text glow effect is enabled on that item (a CSS3 effect, I would assume) and the text glow on all other menu items is toggled off? Thank you for your help!

Solution

  • 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
}