활성 링크 wordpress

나는 클라이언트를위한 wordpress 사이트에서 일하고있다. 탐색 기능이 작동하고 탐색 기능 위로 마우스를 가져 가면 녹색 배경이 표시됩니다. 이는 각 링크 탐색 항목에 해당됩니다.활성 링크 wordpress

나는 또한 선택한 페이지가 동일한 배경을 가지기를 원한다. 따라서 사이트의 방문자는 그가 현재 어디에 있는지 알고있다.

내가 지금까지 무엇을 가지고 :

워드 프레스 :

<div id="nav"> 
    <?php wp_nav_menu (array ('theme_location' => 'header-nav','container' => false)); ?> 
</div>

CSS :

#nav { 
    /*float:right;*/ 
    float:left; 
    height:6em; 
    /*width:560px;*/ 
    /*width:612px;*/ 
    width:710px; 
    /*background:#525252;*/ 
} 

#nav ul { 
    list-style:none; 
} 
#nav li a{ 
    width:80px; 
    text-align:center; 
} 
#nav li a { 
    text-decoration:none; 
    float:left; 
    padding:3.4em 0.4em 0 0; 
    position:relative; 
    right:-1em; 
    /*left:6em;*/ 
    color:#fff; 
    height:2.1em; 
} 
#nav li a:hover{ 
    color:#333; 
    /*background:#60b5b2;*/ 
    background:#69dc37; 
    font-weight:bold; 
} 
#nav li a:active { 
    color:#fff; 
    background:#69dc37; 
}

이 내가 인터넷을 검색하고 a post about menu highlighting을 발견했다. 나는 그것을 시도했지만 효과가 없었다.

활성 링크 (백그라운드)를 작동 시키려면 이에 대한 조언이나 도움이 필요합니다.

출처

2013-02-08 Quinox

': active' 당신이 그것을 의미 생각하지 것입니다. 읽기 : https://developer.mozilla.org/en-US/docs/CSS/:active. 링크를 클릭하여 누르고 있으면 기본적으로 활성화됩니다. 링크가 빨간색으로 깜박일 때 IE5/6를 기억하십니까? 빨간색은': active'를 통해 활성화됩니다. 어떻게 든 URL을 캡처하여 메뉴 링크와 비교하고 새 클래스를 추가해야합니다. –

@ Ryan. 그게 내 첫 번째 게시물에 추가 된 링크로 수행하려고 시도한 것입니다. 이것은 효과가 없었어요. 왜냐하면 wp_nav_menu 때문이라고 생각하니? – Quinox

당신의 CSS 코드에서 배경 색으로 배경을 수정하십시오 :

#nav li a:hover{ 
    color:#333; 
    /*background:#60b5b2;*/ 
    background-color:#69dc37; 
    font-weight:bold; 
} 

#nav li a:active { 
    color:#fff; 
    background-color:#69dc37; 
}

출처

2013-02-08 20:06:13 Hamza

고마워. – Quinox

활성 링크 wordpress

답변

관련 문제