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');
});

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

1 个答案: