gpt4 book ai didi

javascript - jQuery - 在单击时移动到导航菜单最左侧时更改链接的 css

转载 作者:行者123 更新时间:2023-11-28 10:42:06 26 4
gpt4 key购买 nike

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

我有一个导航菜单,如果单击链接(该选项),它会移动到菜单的最左侧位置。无论单击什么菜单选项,在最左边的位置我只想要更大的字体和橙色。单击的下一个选项需要进入左侧位置并使其字体变大并颜色为橙色,而其他选项则变回小和白色。

我还希望剩余的菜单选项保持与它们开始时相同的顺序,如果它们不是最左边位置的选择的话。我希望我的子菜单最终以相同的方式显示和工作。

这是我的代码:

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

最佳答案

你可以在你的函数中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;
}

关于javascript - jQuery - 在单击时移动到导航菜单最左侧时更改链接的 css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23093573/

26 4 0
文章推荐: HTML