jquery - 有没有更好的方法来构建这个顶级菜单？

Question

这是 Site如果您查看 map 下方，您将看到无序列表

这是html

<ul class="play_navigation">
    <li class="active"><a href="#" class="barino_story_bottom">The Story</a></li>
    <li><a href="#" class="barino_video_bottom">The Video</a></li>
    <li><a href="#" class="barino_gallery_bottom">The Gallery</a></li>
    <li><a href="#" class="barino_equipment_bottom">The Equipment</a></li>                          
</ul>

这是我的 CSS

ul.play_navigation {
    list-style:none;
    padding:0;
}

ul.play_navigation li  {
    display: inline;
}

ul.play_navigation li a {
    color: #00506B;
    font-family: Helvetica,sans-serif;
    font-weight: bold;
    padding-right: 34px;
    text-decoration:none;
    margin-left: 18px;
}

ul.play_navigation li.active {
    background:url(images/play-button.png) no-repeat left;
}

到目前为止我看起来还不错，但我被卡住了，因为我需要用户能够点击播放按钮，目前它是一个 li 而不是可点击的，我还需要播放按钮移动到事件的点击链接.. .因此，例如，如果用户单击该链接，我想将它从“故事”移至“视频”。我正在考虑通过 jquery 使用添加删除类，但我想要一些动画效果......任何想法

Answer 1

@Tamer - 您可以通过 jQuery 将点击处理程序附加到相关的 li:

$("li.active").click(function(){

    // actions you want to do when you click play go here

});

另外...您应该修改您的 CSS，通过添加光标属性让用户知道播放按钮是可点击的:

ul.play_naviation li.active {

    background:url(images/play-button.png) no-repeat left;
    cursor: pointer;

}

如何根据点击的链接移动播放按钮由您决定，但示例可能是:

$("ul.play_navigation > a").click(function(){

    $("li.active").removeClass("active");
    $(this).parent().addClass("active");

});

请注意，此方法需要您修改 CSS:

ul.play_navigation li.active

将简单地更改为:

.active