JQuery - 更改活动链接颜色

我有一个小页面，其中包含两个链接，它们将内容加载到div，具体取决于按下哪个链接。JQuery - 更改活动链接颜色

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

我试图用我的当前功能但以下它不工作要做到这一点：

倒也干脆质疑所以我显然是愚蠢的。任何帮助将非常感激。

谢谢！

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

来源

2011-05-19 digitalpencil

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

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

应：

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

另一个问题，虽然我还没有teste d这是，我不相信使用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(); 
    }) 
});

来源

2011-05-19 16:31:47 nrabinowitz

谢谢，那太棒了。必须将属性更改为“链接”并使用该属性并将href设置为＃，以便它不会尝试直接加载streams.php页面，但这是完美的。再次感谢。 – digitalpencil 2011-05-20 10:38:10

对不起，这应该包括我现在添加的'.preventDefault（）'行 - 这将停止默认的链接点击行为，允许原始的'href'实现工作（我认为这从语义立场，并可能更好的可访问性）。 – nrabinowitz 2011-05-22 17:59:29

为什么你不只是做在CSS？

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

a:active { 
    color:#00d2ff; 
}

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

来源

2011-05-19 16:30:53 Kraz

因为他们想突出显示指向活动内容的链接，而不是当前正在单击的链接。 – Quentin 2011-05-19 16:43:45

假装真实，回答太快。除此之外，它适用于ie（8）。 – Kraz 2011-05-19 16:53:34

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

var $a = $("a"); 

$a.click(function() { 

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

});

来源

2011-05-19 16:36:26

JQuery - 更改活动链接颜色

回答

相关问题