如何在點擊后更改鏈接的顏色，然后在單擊其他鏈接后將其更改回來？

Question

我在一個名為div A的div中有兩個鏈接。當單擊鏈接1時，會顯示一個帶有一些信息的div（div B），當單擊鏈接2時，會顯示另一個div（div C）。 這是使用jquery的show / hide完成的。

我想要更改所選鏈接的顏色，然后只在單擊其他鏈接后返回。 因此突出顯示用戶當前正在查看的鏈接。

有誰知道如何通過Jquery甚至PHP實現這種鏈接顏色變化。 謝謝。 非常感謝所有幫助。

使用Javascript

    $("#link1").click(function() {
    $("#Div b").hide();
    $("Div c").show();
    });

    $("#link2").click(function() {
    $("#Div b").hide();
    $("#Div c").show();
    });

HTML

<div id="div a">
<a href="javascript:void(0);" class="links" id="link1"></a>
<a href="javascript:void(0);" class="links" id="link2"></a>
</div>

Answer 1

以下解決方案依賴於ajax鏈接。 它不適用於標准鏈接（意味着它們往返服務器並替換頁面）。

var i_color = '#FFOOOO';
var o_color = '#0000FF';

$('#div_a').delegate('.link', 'click', function(event){
  var $this = $(this);
  $this.css({color : i_color})
       .siblings()
       .css({ color : o_color })
})

要在靜態頁面環境中完成該專長，您可能希望簡單地使用:active css偽選擇器，如此。

// css file
.link:link {
  color : #0000FF;
}
.link:active {
  color : #FF0000;
} 

Answer 2

您需要直接使用CSS

$("#link1").click(function() 
{
    $("#Div b").hide();
    $("Div c").show();
    $(this).css('color', '#f00');
});

$("#link2").click(function() 
{
    $("#Div b").hide();
    $("#Div c").show();
    $(this).css('color', '#00f');
});

或者在CSS中定義它

a.class1
{
    color: #f00;
}

a.class2
{
    color: #00f;
}

然后像這樣使用它：

$("#link1").click(function() 
{
    $("#Div b").hide();
    $("Div c").show();
    $(this).toggleClass('class1');
});

$("#link2").click(function() 
{
    $("#Div b").hide();
    $("#Div c").show();
    $(this).toggleClass('class2');
});

Answer 3

你可以使用：

$("#link1").css("color","yourcolor");

然后在調用另一個時將其更改回來。

Answer 4

你可以嘗試這樣的事情：

<style type='text/css'>
  .highlighted { color: red; }
</style>
<script type='text/javascript'>
  $("#link1").click(function() {     
    $("#Div b").hide();
    $("Div c").show();
    $('.highlighted').removeClass('highlighted');
    $(this).addClass('highlighted');  
  });      

  $("#link2").click(function() {
    $("#Div b").hide();
    $("#Div c").show();
    $('.highlighted').removeClass('highlighted');
    $(this).addClass('highlighted');  

  });
</script>

Answer 5

我建議為活動鏈接創建一個css類，例如'active'，然后使用jquery將其分配給正確的鏈接，同時在另一個上禁用它。 例如：

CSS：

.active{
/* Some distinguishing style here */
}

JS：

$("#link1").click(function() {
$("#Div b").hide();
$("Div c").show();
$('.active').removeClass('active');
$('#link1').addClass('active');
});

$("#link2").click(function() {
$("#Div b").hide();
$("#Div c").show();
$('.active').removeClass('active');
$('#link2').addClass('active');
});

Answer 6

你可以這樣做：

$("#link1").click(function() {
    $(".links").removeClass("special-color");
    $("#link1").addClass("special-color");
    $("#Divb").show();
    $("#Divc").hide();
});

$("#link2").click(function() {
    $(".links").removeClass("special-color");
    $("#link2").addClass("special-color");
    $("#Divb").hide();
    $("#Divc").show();
});

然后在你的CSS中添加這樣的東西：

a.special-color {
    color: #FF5E99; /* hot pink */
}

此外，HTML中的ID不能包含空格，因此您應該將div ID更改為不帶空格的內容。