문제
jQuery를 사용하여 링크를 클릭 할 때 링크를 강조하는 방법은 무엇입니까?
예를 들어, 링크 class1_1을 클릭하면이 링크를 빨간색 (또는 다른 색상)으로 만들고 싶습니다.
JavaScript 코드는 다음과 같습니다.
<script type="text/javascript">
$(function(){
$("#menu li").each(function(){
$(this).click(function(event){
var ul=$(this).children("ul")
var span = $(this).children("span")
if(ul.html()!=null)
{
if(ul.css("display")=="none")
{
ul.css("display","block");
span.addClass("up")
}else
{
ul.css("display","none")
span.removeClass("up")
}
event.stopPropagation();
}else
{
event.stopPropagation();
}
});
});
return false;
});
</script>
여기서 HTML 코드 :
<ul id="menu">
<li class="title"><span>class1 </span>
<ul>
<li><a href="">class1_1</a></li>
<li><a href="">class1_2</a></li>
</ul>
</li>
<li class="title"><span>class2</span>
<ul>
<li><span>class2_1</span>
<ul>
<li><a href="">class2_1_1</a></li>
<li><a href="">class2_1_1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
어쩌면 내 질문을 명확하게 설명 할 수 없을 수도 있습니다. 마지막으로 클릭 링크가 만들어졌습니다.
색상에서 빨간색과 다른 링크가 기본 색상으로 설정되었습니다.
해결책 5
<script type = "text/javascript" >
$(function() {
$("#menu li").each(function() {
$(this).click(function(event) {
$("#menu li").removeClass("high");
$(this).addClass("high");
var ul = $(this).children("ul")
var span = $(this).children("span")
if (ul.html() != null) {
if (ul.css("display") == "none") {
ul.css("display", "block");
span.addClass("up")
} else {
ul.css("display", "none") span.removeClass("up")
}
event.stopPropagation();
} else {
event.stopPropagation();
}
});
});
return false;
});
</script>
<style>
.high{color:red}
</style>
다른 팁
CSS를 사용하는 것이 가능합니다. jQuery가 필요하지 않습니다.
가장 밝은 부분:
a:active {
background-color: #FF0000;
}
링크 색상 변경 :
a:active {
color: #FF0000;
}
편집 : 의견에 응답 ... 링크가 브라우저를 다른 페이지로 지시하지 않으면 사용할 수 있습니다. 마이크 로빈슨의 대답 페이지를 떠나지 않고 색상을 기본 OnBlur로 변경하지 않고도 동일한 효과를 달성합니다.
지금 당장 jQuery가 없지만 이것이 그렇게해야한다고 생각하십시오. 'up'은 링크를 빨간색으로 만드는 클래스라고 가정합니다.
$("ul#menu a").click(function(){
$(this).addClass('up');
});
이것은 작동해야합니다 :
자바 스크립트 :
$(function(){
$('.class1').click(function() {
$(this).toggleClass('active1');
});
});
CSS :
a.class1 { color: red; }
a.active1 { color: blue; }
HTML :
<a href="#" class="class1">some text</a>
AddClass/RemoveClass 대신 ToggleClass (2 in 1)를 사용하는 것이 좋습니다.
나는 추천 할 것이다 http://plugins.jquery.com/project/color jQuery.color 플러그인. 모든 종류의 HTML 요소에서 색상을 애니메이션 할 수 있습니다.
자바 스크립트 :
$('.link').click(function() {
if (!$(this).hasClass('hi')) {
// If this link is not already highlighted, highlight it and make
// sure other links of class .link are not highlighted.
$('.hi').removeClass('hi');
$(this).addClass('hi');
}
});
CSS :
a.hi { color: red; }
HTML :
<a href="#" class="link">my text</a>
<a href="#" class="link">that text</a>
<a href="#" class="link">this text</a>
CSS 의사 클래스를 사용하여 수행 할 수 있습니다 활동적인. 활성화 된 요소에 특별한 스타일을 추가합니다.
예를 들어이 작업을 수행 할 수 있습니다.
a: active { color: red; }
조심하십시오. A : Active는 다음과 같은 a : 효과를 얻으려면 CSS 정의에 호버를 가져와야합니다 !!