Javascript JQuery-更改活动链接颜色_Javascript_Jquery_Css

Javascript JQuery-更改活动链接颜色

javascript jquery css

Javascript JQuery-更改活动链接颜色,javascript,jquery,css,Javascript,Jquery,Css,我有一个带有两个链接的小页面，根据按下的链接将内容加载到一个div中问题很明显，我想用不同的颜色突出显示当前内容链接，并根据按下的链接切换颜色我正在尝试使用当前函数执行此操作，但它不起作用：这个问题很简单，所以我很明显是个哑巴。任何帮助都将不胜感激谢谢 <script type="text/javascript"> function loadContent(id) { $("#video").load("streams.php?o="+id+"");

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

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

我正在尝试使用当前函数执行此操作，但它不起作用：

这个问题很简单，所以我很明显是个哑巴。任何帮助都将不胜感激

谢谢

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


函数loadContent（id）{
$（“#视频”）.load（“streams.php？o=“+id+”）；
$（'active'）.removeClass（'active'）；
$（this.addClass（'active'）；
}

完整代码：

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


梁
注册表对象（“myId”、“9.0.0”、“expressInstall.swf”）；
函数loadContent（id）{
$（“#视频”）.load（“streams.php？o=“+id+”）；
$（'active'）.removeClass（'active'）；
$（this.addClass（'active'）；
}
*{边距：0；填充：0；}
img{边框样式：无；}
html{高度：100%；}
正文{高度：100%；字体系列：“Tahoma”，“Arial”，无衬线；字体大小：15px；字体重量：粗体；}
a{
颜色：#fff；
文字装饰：无；
}
.主动{
颜色：#00d2ff；
}
.集装箱{
位置：绝对位置；
背景：url（“images/video bg.jpg”）不重复；
宽度：520px；
高度：576px；
}
#录像带{
位置：相对位置；
背景：#000；
顶部：275px；
左：55px；
宽度：400px；
高度：222px；
}
#流控制器{
位置：相对位置；
左：55px；
顶部：285px；
宽度：200px；
}
|

为什么不直接用CSS来做呢

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

a:active {
  color:#00d2ff;
}

编辑出我的解决方案的一部分：《忍者》和《纳拉比诺维茨》中的一个更好的解决方案

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

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

应该是：

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

另一个问题，尽管我还没有对此进行测试，但我不相信使用

href=“javascript:loadContent（1）；”

将函数中

this

的值设置为适当的

元素。如果使用jQuery，最好使用jQuery设置处理程序，并通过标记传递变量，例如：

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

要将“活动”类切换到按下的链接，我将执行以下操作：

var $a = $("a");

$a.click(function() {

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

});

因为他们想突出显示指向活动内容的链接，而不是当前正在单击的链接。该死的是，回答得太快了。除了，它对ie（8）有效。谢谢，太好了。必须将属性更改为“link”并使用该属性，然后将href设置为#，这样它就不会直接加载streams.php页面，但在其他方面这是完美的。再次感谢。抱歉，这应该包括我现在添加的

.preventDefault（）

行-这将停止默认的链接单击行为，允许原始的

href

实现工作（我认为从语义角度来看，这稍微好一点，并且可能对可访问性更好）。

var $a = $("a");

$a.click(function() {

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

});