Question

以下是Site如果您在地图下方看到无序列表

这是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使用添加删除类但我想要一些动画效果...任何想法< / p>

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

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

1 个答案: