Jquery 有没有更好的方法来组织这个顶级菜单？

这是一个列表，如果你看地图下面，你会看到无序列表

这是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>

---

到目前为止，我看起来还行，但我被卡住了，因为我需要用户能够点击播放按钮，目前它是一个li，不可点击，我还需要播放按钮移动到活动点击链接…因此，例如，如果用户点击该链接，我想将其从“故事”移动到“视频”。。我想通过jquery使用add-remove类，但我想要一些动画效果…任何想法

@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

我想在此提出以下问题：

.active