jQuery - 改變鏈接的css，當他們移動到最左側的導航菜單點擊

Question

這是我第一次問任何事情，但我卡住了，我希望我清楚地解釋我想要什麼。

我有一個導航菜單，如果一個鏈接被點擊它（該選擇）移動到菜單的最左點。無論點擊哪個菜單選項，在最左邊的位置，我只想要字體更大，顏色橙色。點擊的下一個選項需要進入左邊的位置，字體變大，顏色變爲橙色，而其他選項則返回小和白色。

我還希望剩下的菜單選項保持與它們開始的順序相同，如果它們不是那個最左側的選項。我希望我的子菜單最終以相同的方式查看和工作。

這裏是我的代碼：

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/

我試過只是添加一個函數來改變第一個孩子的css，但它的目標是空白點，而不是它進入它的內容。

Answer 1

內能addClass只是讓我不要離開這個問題在那裏沒有完全回答 - 我能夠得到想要的效果CT使用您的建議@Vector並添加一點點地得到了李的回原來的樣子：

$('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; 
} 

，因爲我有其他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; 
}