Home/ Questions/Q 5930797
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T14:36:13+00:00

I’ve got a small page with two links that load content into a div

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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();
    })
});
    • 0