jQuery - 클릭시 nav 메뉴의 가장 왼쪽으로 이동하는 링크의 CSS 변경

Question

이 질문에 대한 답변을 얻은 것은 이번이 처음입니다.하지만 나는 갇혀 있는데 내가 무엇을하려고하는지 명확하게 설명하기를 바랍니다.

링크를 클릭하면 (해당 선택 사항) 메뉴의 가장 왼쪽 지점으로 이동하는 nav 메뉴가 있습니다. 어떤 메뉴 옵션을 클릭하고 가장 왼쪽 지점에서 나는 단지 글꼴을 크게하고 오렌지색을 원한다. 클릭 한 다음 옵션은 왼쪽의 자리로 이동해야하고 글꼴은 더 ​​크고 오렌지색을 유지해야하지만 다른 옵션은 작고 흰색으로 돌아갑니다.

왼쪽 메뉴에서 선택하지 않은 나머지 메뉴 옵션도 시작 순서와 동일하게 유지하고 싶습니다. 내 하위 메뉴가 결국 같은 방식으로 보이고 작동하기를 바랍니다.

HTML :

<div> 
     <ul id="main-top"> 
      <li id="blank"><a href="#" ></a></li> 
      <li><a href="#" id="proj1" class="mainNav">Projects</a></li> 
      <li><a href="#" id="serv1" class="mainNav">Services</a></li> 
      <li><a href="#" id="cont1" class="mainNav">Contact</a></li> 
      <li><a href="#" id="client1">Sign-in</a></li> 
     </ul> 
    </div> 

CSS :

body { 
background: black; 
color: white; 
} 

#main-top { 
position: absolute; 
top: 75px; 
border-top: 1px solid #ffffff; 
width: 850px; 
} 

#main-top li{ 
display: inline; 
list-style-type:none; 
padding-right: 20px; 
padding-bottom: 16px; 
border-right: 1px solid #ffffff; 
height: 50px; 
} 

a { 
color: white; 
font-size: 1em; 
padding: 10px 75px 5px 3px; 
text-decoration: none; 
list-style-type: none; 
} 

a:hover{ 
color: #FF4500; 
} 

jQuery를 :

$('li').click(function() { 
    var $this = $(this); 
    $this.insertBefore($this.siblings(':eq(0)')); 
    $('#blank').hide(); 
}); 

데모 : http://jsfiddle.net/CLTZs/

012 여기

내 코드입니다

나는 첫 번째 자식의 CSS를 변경하는 함수를 추가하려고 시도했지만 그 빈 곳을 대상으로하고 그 대상에 들어가는 것이 아닙니다.

Answer 1

을 내 addClass 수 - 원하는 효과를 얻을 수있었습니다.

$('li').click(function() { 
    var $this = $(this); 
    $this.insertBefore($this.siblings(':eq(0)')); 
    $this.toggleClass('active'); 
    $this.siblings().removeClass("active"); 
    $('#blank').hide(); 
}); 

내 CSS에 "활성"클래스를 추가 : 내가 다른 가지고 있기 때문에

.active a{ 
color: #FF4500; 
font-size: 25px; 
font-weight: bold; 
margin: 0; 
} 

당신의 제안 @Vector를 사용하여 추가 약간의 원래의 모습으로 리튬의 다시를 얻을 수에 의해 코네티컷 jquery는 이러한 메뉴 옵션을 사용하여 계속 토글하며 기존 함수에 해당 jquery를 삽입 할 수있었습니다. 웬일인지 그것이리스트의 나머지에 나의 간격을 던져 버린다. 그러나 나는 그것을 나의 css 파일에서 이해해야 할 것이다.

바이올린 : 그것에 대해 http://jsfiddle.net/CLTZs/2/

Answer 2

당신은 그냥 그래서 내가 거기에이 질문을 떠나 지마 완벽하게 응답하지 함수

DEMO http://jsfiddle.net/CLTZs/1/

jQuery를

$('li').click(function() { 
    var $this = $(this); 
    $this.insertBefore($this.siblings(':eq(0)')); 
    $this.addClass('firstOpt'); 
    $('#blank').hide(); 
}); 

CSS

#main-top li.firstOpt a { 
    color: #FF4500; 
    font-size: 25px; 
    font-weight: bold; 
}