我正在从YouTube播放列表中检索视频,然后将其加载到carousal中。
现在,我想要Active动态< li>。当我点击任何一个< li>或视频(里面是< li>。它假设是活跃的。
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/'+nPlaylistID+'?v=2&alt=json&callback=?';
var videoURL= 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
var list_data="";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var url = videoURL + videoID;
var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
list_data += '<li><a href= "#" title="'+ feedTitle +'" onClick=show_yt_vid("'+videoID+'");><img src="'+ thumb +'" /></a></li>';
});
演示链接: - http://jsfiddle.net/4hHaG/
屏幕截图(我想要的): - https://docs.google.com/file/d/0B1EUrqDt0LieWUEydnVIUTh6NWM/edit?usp=sharing
Thanx提前!!!!!! :)
答案 0 :(得分:0)
我的建议是: 在循环中的标签中添加一个类
list_data += '<li><a class="vids" href= "#" title="'+ feedTitle +'" onClick=show_yt_vid("'+videoID+'");><img src="'+ thumb +'" /></a></li>';
然后使用jquery将类添加到单击的元素
$(document).on('click', '.vids', function() {
$('.vids').removeClass('active');
$(this).addClass('active');
});
这是演示:http://jsfiddle.net/4hHaG/1/ 只需在课程中添加背景即可“活跃”。在css中你想要的图像