jquery - 在导航栏上的活动链接后面放置背景图像

Question

我正在寻找一个导航菜单，其中活动链接后面有一个背景图像，当单击下一个链接时，图像会转到下一个活动链接。我不确定这是否可以单独使用 CSS 完成，或者是否还需要一些 jQuery。

<div id="header">
    <div id="company_name">

    </div>
        <ul id="gen_navigation" class="container_fixed">
            <li><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>About</span></a></li>
            <li><a href="#"><span>Technology</span></a></li>
            <li><a href="#"><span>Applications</span></a></li>
            <li><a href="#"><span>Benefits</span></a></li>
            <li><a href="#"><span>Inquiries</span></a></li>
        </ul>

</div>

http://jsfiddle.net/Dk6eq/

注意：我目前只有基本的 css 和 html

Answer 1

它不能只用 CSS 来完成，因为 CSS 没有持久的“点击”触发器。

只需添加一个 CSS 类，例如

.active {
   background-image: url(...)
}

然后，当你点击...

$("#gen_navigation a").on('click', function () {
   $("#gen_navigation a").removeClass('active');
   $(this).addClass('active');
});