CODEWITHSUNDEEP
javascriptjquerycss
dg85
dg85

Reputation: 490

JQuery - Changing active link color

I've got a small page with two links that load content into a div dependant upon which link is pressed.

Question is fairly obvious, i'd like to highlight the current content link with a different color and toggle the color according to which link is pressed.

I'm attempting to do this with my current function using the following however it isn't working:

Pretty simply question so i'm obviously being dumb. Any help would be much appreciated.

Thanks!

<script type="text/javascript">
    function loadContent(id) {
        $("#video").load("streams.php?o="+id+"");
        $('active').removeClass('active');
        $(this).addClass('active');
    }
</script>

Full code:

<html>

<head>

    <title>beam</title>

    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
    swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
    </script>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">
        function loadContent(id) {
            $("#video").load("streams.php?o="+id+"");
            $('active').removeClass('active');
            $(this).addClass('active');
        }
    </script>

    <style>

    * { margin:0; padding:0; }
    img{ border-style:none; }

    html { height: 100%; }
    body { height: 100%; font-family: "Tahoma", "Arial", sans-serif; font-size:15px; font-weight: bold;}

    a {
    color:#fff;
    text-decoration: none;
    }

    .active {
    color:#00d2ff;
    }

    .container {
    position:absolute;
    background:url("images/video-bg.jpg") no-repeat;
    width:520px;
    height:576px;
    }

    #video {
    position:relative;
    background:#000;
    top:275px;
    left:55px;
    width:400px;
    height:222px;
    }

    #stream-controller {
    position:relative;
    left:55px;
    top:285px;
    width:200px;
    }

    </style>

</head>

<body onLoad="loadContent(1);">

    <div id="fb-root"></div>

    <div class="container">

        <div id="video">

            &nbsp;

        </div>

        <div id="stream-controller">
            <p><a href="javascript:loadContent(1);" class="active">STREAM 1</a> | <a href="javascript:loadContent(2);">STREAM 2</a></p>
        </div>

    </div>

</body>

</html>

Upvotes: 2

Views: 8580

Answers (3)

nrabinowitz
nrabinowitz

Reputation: 55678

One issue is your selector for the active link:

$('active').removeClass('active');

should be:

$('.active').removeClass('active');

The other issue, though I haven't tested this yet, is that I don't believe using href="javascript:loadContent(1);" will set the value of this in the function to the appropriate a element. If you're working with jQuery, you'd be better off setting the handler with jQuery, and passing the variable through the tag, something like:

<a class="stream active" href="streams.php?o=1">STREAM 1</a>

with the jQuery code:

$(function() {
    $('a.stream').click(function(e) {
        var $this = $(this);
        $("#video").load($this.attr('href'));
        $('.active').removeClass('active');
        $this.addClass('active');

        // prevent default link click
        e.preventDefault();
    })
});

Upvotes: 8

Kraz
Kraz

Reputation: 7090

Why don't you just do it in CSS? 

a {
  color:#fff;
  text-decoration: none;
}

a:active {
  color:#00d2ff;
}

editing out a part of my solution : ninja'd and a much better one from nrabinowitz

Upvotes: 2

Code Maverick
Code Maverick

Reputation: 20415

To toggle the "active" class to the link pressed, I would do this:

var $a = $("a");

$a.click(function() {

    $a.removeClass("active");
    $(this).addClass("active");

});

Upvotes: 0

Related Questions