Question

我有一个带有两个链接的小页面，根据按下的链接将内容加载到div中。

问题相当明显，我想用不同颜色突出显示当前内容链接，并根据按下的链接切换颜色。

我正在尝试使用以下功能使用以下功能执行此操作，但它无效：

非常简单的问题，所以我显然是愚蠢的。任何帮助将不胜感激。

谢谢！

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

完整代码：

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

Answer 1

一个问题是您的活动链接选择器：

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

应该是：

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

另一个问题，虽然我尚未对此进行测试，但我不相信使用href="javascript:loadContent(1);"会将函数中this的值设置为适当的a元件。如果你正在使用jQuery，你最好用jQuery设置处理程序，并通过标记传递变量，如：

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

使用jQuery代码：

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

Answer 2

你为什么不在CSS中这样做？

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

a:active {
  color:#00d2ff;
}

编辑我的解决方案的一部分：忍者和来自nrabinowitz的更好的

Answer 3

要将“活动”类切换到按下的链接，我会这样做：

var $a = $("a");

$a.click(function() {

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

});

JQuery - 更改活动链接颜色

3 个答案: