jQuery-当链接移动到导航菜单的最左边时，点击更改链接的css

jQuery - change css of links as they move to far left of nav menu on click

本文关键字：链接 css 移动 导航 jQuery- 菜单 左边      更新时间：2023-09-26

这是我第一次问任何问题，但我被卡住了，我希望我能清楚地解释我在尝试什么。

我有一个导航菜单，如果点击链接，它（该选项）会移动到菜单的最左边。无论点击什么菜单选项，在最左边的位置，我只想字体更大，颜色是橙色。单击的下一个选项需要位于左侧，字体变大，颜色为橙色，而其他选项则变回白色。

我还希望剩下的菜单选项保持与开始时相同的顺序，如果它们不是最左边的选项的话。我希望我的子菜单最终看起来和工作方式相同。

这是我的代码：

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，但它针对的是那个空白点，而不是其中的内容。

您可以在函数中使用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;
}

为了避免这个问题没有得到完全回答，我使用了你的建议@Vector并添加了一点使li恢复到原来的外观，从而达到了预期的效果：

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

并将类"active"添加到我的CSS:

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

由于这些菜单选项还有其他jquery切换，所以我能够将jquery直接插入到我现有的函数中，并且它工作得很好。出于某种原因，它在列表的其余部分增加了我的间距，但我必须在css文件中弄清楚这一点。

小提琴：http://jsfiddle.net/CLTZs/2/

相关文章：