클릭하면 링크 색상을 어떻게 변경합니까? 다른 링크를 클릭하면 다시 변경됩니까?

Question

div A라는 div 안에 링크가 두 개 있습니다. 링크 1을 클릭하면 일부 정보가 표시되고 (div B) 링크 2를 클릭하면 다른 div (div C)가 표시됩니다. 이것은 jquery의 show/hide를 사용하여 수행됩니다.

나는 변경하고 다른 링크가를 클릭하면 만 를 반환 할 선택 링크의 색상을하고 싶습니다. 따라서 사용자가 현재보고있는 링크를 강조 표시합니다.

누구든지 Jquery 또는 PHP를 통해이 링크 색상 변경을 달성하는 방법을 알고 있습니다. 고맙습니다. 모든 도움은 대단히 감사하겠습니다.

자바 스크립트

$("#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

당신은, 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 2

아래의 솔루션은 아약스 링크를 가지고에 의존합니다. 표준 링크 (서버로 왕복하고 페이지를 교체한다는 의미)에서는 작동하지 않습니다.

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 의사 선택기를 사용하실 수 있습니다 정적 페이지 환경에서 위업을 달성합니다.

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

을 그리고 당신이 다른 하나를 호출 할 때 다음을 다시 변경 :

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

Answer 3

당신은 사용할 수 있습니다.

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 클래스를 만들고 '활성'으로 설정 한 다음 jquery를 사용하여 올바른 링크에 할당하고 다른 링크에서는 비활성화하는 것이 좋습니다. 이자형.g :

CSS :

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

JS :

$("#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는이 같은 추가 :

$("#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

당신은 이런 식으로 작업을 수행 할 수 있습니다

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

또한 HTML의 ID에는 공백이 없어야하므로 div ID를 공백없이 변경해야합니다.