javascript - 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/

我试过只添加一个函数来改变第一个 child 的 css，但它针对的是空白点而不是其中的内容。

Answer 1

你可以在你的函数中addClass

演示 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;
}