2010-05-22 3 views
0

를 사용하여 링크를 나는 다음과 같은 한 링크 방법을 활성화 자바 스크립트

<ul class="dropdown dropdown-horizontal"> 
     <li><a href="#" class="dir" onClick="clickMe('Wall'); selectedTab('Wall');">Wall</a></li> 
     <li><a href="#" class="dir" onClick="clickMe('Introduction');">Introduction</a></li> 
     <li><a href="#" class="dir" onClick="clickMe('Activities');">Activities</a></li> 
     <li><a href="#" class="dir" onClick="clickMe('Reviews');">Reviews</a></li> 
     <li><a href="#" class="dir" onClick="clickMe('Recommendation');">Recommendation</a></li> 
     <li><a href="#" class="dir" onClick="clickMe('Photos');">Photos</a></li> 
     <li><a href="#" class="dir" onClick="clickMe('Discussion');">Discussion</a></li> 
    </ul> 

내가 어떤 링크를 클릭하면 다음이 조명 높아야한다.

+0

그것은 중간에 공백없이 자바 스크립트입니다. – microspino

답변

2

흠 :

<a href="#" id='photos' 
onclick="var photos=document.getElementById('photos');photos.style.background='chartreuse';false;"> 
Photos</a> 
3

나는 a:active CSS psuedo-selector를 원한다고 생각합니다.

$('.menuItem').click(function() { 
    $('.current').removeClass("curret"); // To remove the highlight from the previous selection 
    $(this).addClass("current") 
}); 

는 그런 다음 CSS에서 당신은 당신이 원하는 스타일로 현재 선언합니다 :

1

가장 쉬운 방법은 당신이 좋아하는 뭔가를해야만 할 것이다 JQuery와에게

을 사용하는 것입니다. 이 비교 대 css 의사 선택기의 한 가지 장점은 메뉴가 ul 인 경우 링크의 부모 요소에 액세스하기 위해 $ (this) .parent()와 같은 작업을 수행 할 수 있다는 것입니다.

3

이렇게하려면 자바 스크립트가 필요하지 않습니다. 일부 CSS 규칙으로 충분합니다.

당신이 HTML 의사 선택기 중 하나 또는 모두 사용할 수해야하는 행동에 따라 (: 링크, 을 : 를 방문 :, 가져 : 활성을).

링크 선택자는 링크가 클릭되지 않았거나 어떤 이유로 든 활성화되지 않은 경우, 즉 정상 상태 인 경우 링크 동작을 지정합니다.

: 활성 의사 클래스는 활성화 된 요소에 스타일을 추가합니다.

좀 더 구체적인 예를 들어 강조 표시 할 수해야하는 경우

무엇 마우스 오버 당신의 HTML의 head 섹션에 넣고 (링크는 마우스 아래에있는 경우에만 다른 단어) :

<style type="text/css" media="screen"> 
    a:hover { background: #fbdbe8; color: #F55B99;} 
</style> 
당신은 당신이 이미 당신의 HTML의 head 섹션에 넣고하지 무슨 대을 방문한 것을 강조하려는 경우

는 :

<style type="text/css" media="screen"> 
    a:visited { background: #fbdbe8; color: #F55B99;} 
</style> 

그런 다음 모든 링크는 시간이 될 것입니다 클릭 당신이 페이지로 돌아 왔을 때

물론 외부 .css 파일에서 말한 스타일 규칙을 헤드에 추가하는 대신 추가 할 수 있습니다.

+0

스타일을 모두 정의하고 싶다면 ** LoVe HAte ** 주문 :'a : link','a : visited','a : hover','a : active'를 기억하십시오. 그렇지 않으면 일부 브라우저에서 화를 낼 수 있습니다. – BalusC

+0

@BalusC 팁 주셔서 감사. – microspino

관련 문제