jQuery CSS 메뉴가 활성 링크를 선택하지 않음

Question

이 문제는 무엇이고 어떻게 해결할 수 있습니까?

항목 중 하나를 선택하면 배경 및 글꼴을 변경하려는 CSS 메뉴 (가로)가 있습니다. 나는 그것이 작동하도록 돕기 위해 jQuery 코드를 다른 게시물에서 찾았고 코드를 올바르게 코딩했다고 생각했지만 클래스를 변경하기 위해 항목을 클릭하면 클래스가 추가되지만 배경과 글꼴은 동일하게 유지됩니까? 어떤 아이디어가 있습니까? 여기

<ul id="menu_nav" class="buttons"> 
    <li> 
    <a href="#" onclick="' . $menu_path . '">Item 1</a> 
    </li> 
    <li> 
    <a href="#" onclick="' . $menu_path . '">Item 2</a> 
    </li> 
    <li> 
    <a href="#" onclick="' . $menu_path . '">Item 3</a> 
    </li> 
</ul> 

를 CSS의 :

다음은 HTML의

ul#menu_nav 
{ 
    float:left; 
    width:790px; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    background-color:#000099; 
} 
ul#menu_nav a 
{ 
    float:left; 
    text-decoration:none; 
    color:white; 
    background-color:#000099; 
    padding:0.2em 0.6em; 
    border-right:1px solid #CCCCCC; 

    font-family: Tahoma; 
    font-size: 11px; 
    font-style: normal; 
    font-weight: bold; 
    position: relative; 
    height: 21px; 
    line-height:1.85em; 
} 
ul#menu_nav a:hover { 
    background-color:#F1F4FE; 
    color:#000099; 
    border-top:1px solid #CCCCCC; 
} 
ul#menu_nav li {display:inline;} 

.selected { 
    background-color:#F1F4FE; 
    color:#000099; 
    border-top:1px solid #CCCCCC; 
} 

을 여기에 jQuery를이다 :

$(function(){ 
    $(".buttons li>a").click(function(){ 
    $(this).parent().addClass('selected'). // <li> 
     siblings().removeClass('selected'); 
    }); 
}); 

Answer 1

감사를 변경해보십시오.

기본적으로 방금 두 클래스를 만들고 두 클래스를 서로 바꿔서 jquery 선택기를 사용하여 클래스를 추가/제거하여 원하는 결과를 얻었습니다.

$(function(){ 
       $(".menu_buttons li>a").click(function(){ 
       $(this).addClass('selected').removeClass('button'). // <li> 
        parents().siblings().children("a").removeClass('selected').addClass('button'); 
       }); 
      }); 

마지막 CSS는 다음과 같습니다!

ul#menu_nav 
{ 
    float:left; 
    width:790px; 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    background-color:#000099; 
} 
ul#menu_nav a.button 
{ 
    float:left; 
    text-decoration:none; 
    color:white; 
    background-color:#000099; 
    padding:0.2em 0.6em; 
    border-right:1px solid #CCCCCC; 

    font-family: Tahoma; 
    font-size: 11px; 
    font-style: normal; 
    font-weight: bold; 
    position: relative; 
    height: 21px; 
    line-height:1.85em; 
} 
ul#menu_nav a:hover { 
    background-color:#F1F4FE; 
    color:#000099; 
    border-top:1px solid #CCCCCC; 
} 
ul#menu_nav li {display:inline;} 

.selected { 
    background-color:#F1F4FE; 
    color:#000099; 
    border-top:1px solid #CCCCCC; 

    float:left; 
    text-decoration:none; 
    padding:0.2em 0.6em; 
    border-right:1px solid #CCCCCC; 

    font-family: Tahoma; 
    font-size: 11px; 
    font-style: normal; 
    font-weight: bold; 
    position: relative; 
    height: 21px; 
    line-height:1.85em; 
} 

Answer 2

때문에 CSS 상속의. ul#menu_nav a CSS 규칙은 항상 .selected 규칙보다 중요합니다. 사람이 함께 오면, 아래에 내가 가지고 있던 문제를 해결는 CSS 및 JQuery와 코드 ... 선택기에게 그것은 나를 다시 더 기본적인 뭔가 자신을 다시 생각 도움이 팁에 대한

#ul.menu_nav a.selected{ 

}