JQuery - 更改活动链接颜色

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

编辑我的解决方案的一部分：ninja'd和nrabinowitz更好的一个

Answer 3

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

var $a = $("a");

$a.click(function() {

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

});

JQuery - 更改活动链接颜色

问题描述

3 个解决方案

解决方案1
8 已采纳 2011-05-19 16:31:47

解决方案2
2 2011-05-19 16:30:53

解决方案3
0 2011-05-19 16:36:26

JQuery - 更改活动链接颜色

问题描述

3 个解决方案

解决方案1 8 已采纳 2011-05-19 16:31:47

解决方案2 2 2011-05-19 16:30:53

解决方案3 0 2011-05-19 16:36:26

解决方案1
8 已采纳 2011-05-19 16:31:47

解决方案2
2 2011-05-19 16:30:53

解决方案3
0 2011-05-19 16:36:26