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 - 更改活動鏈接顏色

回答

相關問題