使用Javascript/JQuery更改CSS的鏈接屬性onClick？

因此，例如我有兩個環節：使用Javascript/JQuery更改CSS的鏈接屬性onClick？

<a onClick="doColorChange()">Link 1</a> 
<a onClick="doColorChange()">Link 2</a>

我希望它這樣，當我點擊鏈接1，鏈接1個變到藍色的顏色來表示選中，鏈接2個保持黑色。當用戶單擊鏈接2時，鏈接2將顏色更改爲藍色，鏈接1將顏色更改爲白色。

我現在有鏈接默認的CSS屬性：

a:link { 
    color: #green; 
}

我不確定處理「doColorChange（）」函數的最佳方式。最好是爲兩種顏色創建兩個CSS類，然後讓doColorChange切換它們？還是更好地給這兩個鏈接一個ID，並以某種方式設置顏色屬性？我該如何做到這一點？

來源

2011-04-22 Teslar

JQUERY：

$(function() { 
    var links = $('a.link').click(function() { 
     links.removeClass('active'); 
     $(this).addClass('active'); 
    }); 
});

HTML標記：

<a href="#" class="link">Link 1</a> 
<a href="#" class="link">Link 2</a>

我建議增加一類的鏈接，這樣更容易。

CSS：

a.link.active { color:blue; }

增加了一個現場版本（小提琴）：http://jsfiddle.net/gHb9F/

來源

2011-04-22 01:05:01 daryl

var doColorChange=function(){ this.style.color="blue";}

來源

2011-04-22 00:59:36 user719631

給元素CSS類將是一個更好的選擇。你可以通過在對象上使用className屬性來完成。在doCOlorChange你可以寫this.className ="newclassName";

來源

2011-04-22 01:01:26

的鏈接您的默認CSS顏色應該是：

$('a').click(
    function(){ 
     $('.selectedLink').removeClass('selectedLink'); 
     $(this).addClass('selectedLink'); 
     return false 
    });

再加上CSS：

a:link { 
    color: #0f0; /* or 
    color: green; 
    color: rgb(0,255,0); 
}

否則，使用jQuery，你可以做到這一點

.selectedLink { 
    color: #00f; 
}

JS Fiddle demo。

來源

2011-04-22 01:03:55

HTML

<a href="#">Link 1</a> 
<a href="#">Link 2</a>

腳本（使用jQuery）

$(document).ready(function(){ 
    $('a').click(function(){ 
     $('a').css('color', 'black'); 
     $(this).css('color', 'blue'); 
    }); 
});

CSS

a:link { color: black; } 
a:visited { color: black; }

Fiddle here

注：顏色的變化將被應用到所有錨頁面上電流。如果你想限制它選擇少數，然後把它們放在一個類中，並將該類添加到選擇器中。

編輯：

如果您打算做比簡單的色彩交換其他東西，那麼類是肯定要走（只是代替.addClass和.removeClass與您的自定義類名.css呼叫的方式

來源

2011-04-22 01:05:53

請在CSS 2個不同類別，當你點擊你的鏈接，然後交換上的鏈接的類。 CSS

a.link{ 
    color : green; 
} 

a.selected{ 
    color : black; 
}

Javascript

jQuery(a).click(function() 
{ 

    jQuery('a.selected').addClass('link'); 
    jQuery('a.selected').removeClass('selected'); 
    jQuery(this).removeClass('link'); 
    jQuery(this).addClass('selected'); 

});

來源

2011-04-22 01:06:21

試試看看這個代碼。我發現使用起來很簡單。

 <script type="text/javascript"> 
      var currentLink = null; 
      function changeLinkColor(link){ 
       if(currentLink!=null){ 
        currentLink.style.color = link.style.color; //You may put any color you want 
       } 
       link.style.color = 'blue'; 
       currentLink = link; 
      } 
     </script> 

     <a onClick="changeLinkColor(this)">Link 1</a> 
     <a onClick="changeLinkColor(this)">Link 2</a>

來源

2012-08-24 06:42:06

使用Javascript/JQuery更改CSS的鏈接屬性onClick？

回答

相關問題