JQuery가 탭 문제를 선택 했습니까?

Question

저는 JQuery를 처음 접했고 어떤 이유로 현재 선택된 탭을 올바르게 강조 표시 할 수 없어 제대로 선택하면 다른 색상이어야합니다. 어떤 사람이이 문제를 해결할 수 있습니까?

다음은 JQuery입니다.

$(document).ready(function() { 

    //When page loads... 
    $(".form-content").hide(); //Hide all content 
    $("#menu ul li:first").addClass("selected-link").show(); //Activate first tab 
    $(".form-content:first").show(); //Show first tab content 

    //On Click Event 
    $("#menu ul li").click(function() { 

     $("#menu ul li").removeClass("selected-link"); //Remove any "selected-link" class 
     $(this).addClass("selected-link"); //Add "selected-link" class to selected tab 
     $(".form-content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the selected-link tab + content 
     $(activeTab).fadeIn(); //Fade in the selected-link ID content 
     return false; 
    }); 

}); 

여기에 CSS가 있습니다.

#container { 
    width: 1024px; 
    background: blue; 
    padding: 0px; 
    margin: 0px; 
    float: left; 
} 

#menu { 
    padding: 0px; 
    margin: 0px; 
} 


#menu ul { 
    width: 1024px; 
    padding: 0px; 
    margin: 0px; 
    margin-top: 25px; 
    border: 0px; 
    float: left; 
    text-align: left; 
    list-style-type: none; 
} 

#menu li { 
    margin: 0px; 
    margin-right: 1px; 
    padding: 0px; 
    float: left; 
    border: 0px; 
    width: auto; 
} 

#menu a:link, #menu a:visited { 
    padding: 9px 9px; 
    float: left; 
    color: white; 
    text-decoration: none; 
    background: black; 
    width: auto; 
} 

#menu a.selected-link, #menu a:hover { 
    background: blue; 
    color: white; 
} 

여기에 HTML이 있습니다.

<div id="body-content"> 

     <div id="menu"> 
      <ul> 
       <li><a href="#tab-1" title="">tab 1</a></li> 
       <li><a href="#tab-2" title="">tab 2</a></li> 
       <li><a href="#tab-3" title="">tab 3</a></li> 
       <li><a href="#tab-4" title="">tab 4</a></li> 
       <li><a href="#tab-5" title="">tab 5</a></li> 
      </ul> 
     </div> 


     <div id="container"> 

      <div id="tab-1" class="form-content"> 
       <p>tab 1</p> 
      </div> 

      <div id="tab-2" class="form-content"> 
       <p>tab 2</p> 
      </div> 

      <div id="tab-3" class="form-content"> 
       <p>tab 3</p> 
      </div> 

      <div id="tab-4" class="form-content"> 
       <p>tab 4</p> 
      </div> 

      <div id="tab-5" class="form-content"> 
       <p>tab 5</p> 
      </div>  

     </div> 

    <div> 

Answer 1

편집

$(document).ready(function() { 

    //When page loads... 
    $(".form-content").hide(); //Hide all content 
    var firstMenu = $("#menu ul li:first"); 
    firstMenu.show(); 
    firstMenu.find("a").addClass("selected-link"); //Activate first tab 
    $(".form-content:first").show(); //Show first tab content 

    //On Click Event 
    $("#menu ul li").click(function() { 

     $("#menu ul li a").removeClass("selected-link"); //Remove any "selected-link" class 
     $(this).find("a").addClass("selected-link"); //Add "selected-link" class to selected tab 
     $(".form-content").hide(); //Hide all tab content 

     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the selected-link tab + content 
     $(activeTab).fadeIn(); //Fade in the selected-link ID content 
     return false; 
    }); 

}); 

"

Answer 2

이 라인을 변경해보십시오 :

$("#menu ul li").removeClass("selected-link"); 
$(this).addClass("selected-link"); 

에 :

$("#menu ul li").find('a').removeClass("selected-link"); 
$(this).find('a').addClass("selected-link"); 

당신은 link하지 li에 클래스를 추가하고 싶습니다.