jQuery - 使用选项卡加载

时间:2015-07-20 00:07:24

标签: javascript jquery html css tabs

我正在尝试使用带有视频但却无效的标签





这是我到目前为止所尝试的内容:


& #xA;

jQuery:




  $('document')。ready(function(){
 $(“#sidebar”) .tabs({
 event:“click”,
 activate:function(event,ui){
 console.log(ui);
 var _tab = ui.newTab;& #xA; $('#sidebar li')。removeClass('active');
 $(_ tab).addClass('active');
},
});&# XA;});
  




HTML:




 <代码>&LT; div id =“sidebar”&gt;&#xA;&lt; ul&gt;&#xA;&lt; li&gt;&lt; a href =“#tabs-1”&gt; Video1&lt; / a&gt;&lt; / li&gt;&#xA ;&lt; li&gt;&lt; a href =“#tabs-2”&gt; Video2&lt; / a&gt;&lt; / li&gt;&#xA;&lt; li&gt;&lt; a href =“#tabs-3”&gt; Video3&lt; ; / a&gt;&lt; / li&gt;&#xA;&lt; / ul&gt;&#xA;&lt; div id =“tabs-1”&gt;&#xA;&lt; script data-config =“// config。 playwire.com/17003/videos/v2/3714373/zeus.json“data-css =”// cdn.playwire.com/bolt/js/zeus/skins/default.css“data-height =”390“ data-width =“630”src =“// cdn.playwire.com/bolt/js/zeus/embed.js”type =“text / javascript”&gt;&lt; / script&gt;&#xA;&lt; / div&gt ;&#xA;&lt; div id =“tabs-2”&gt;&#xA;&lt; script data-config =“// config.playwire.com/17003/videos/v2/3745793/zeus.json”data -css =“// cdn.playwire.com/bolt/js/zeus/skins/default.css”data-height =“390”data-width =“630”src =“// cdn.playwire.com/bolt /js/zeus/embed.js“type =”text / javascript“&gt;&lt; / script&gt;&#xA;&lt; / div&gt;&#xA;&lt; div id =”tabs-3“&gt;&# xA;&lt; script data-config =“// config.playwire.com/17003/videos/v2/3745040/zeus.json”data-css =“// cdn.playwire.com/bolt/js/zeus/skins /default.css“data-height =”390“data-width =”630“src =”// cdn.playwire.com/bolt/js/zeus/embed.js“type =”text / javascript“&gt;&lt; ; /脚本&GT;&#XA;&LT; / DIV&GT;&#XA;&LT; / DIV&GT;&#XA;  
&#XA;&#XA;

CSS:

&#xA;&#xA;
  li {&#xA;浮动:左;&#XA;保证金:0 10px;&#xA;}&#xA; #sidebar li a {&#xA;颜色:#000;&#xA;}&#xA; #sidebar li.inactive a {&#xA;颜色:#FF0000;&#xA;}&#xA; #sidebar li.active a {&#xA;颜色:#00FFFF;&#xA;}&#xA;&#xA;#tabs-2 div,#tabs-3 div {&#xA;身高:390px!重要; //我认为问题出在这里&#xA;}&#xA;  
&#xA;&#xA;

这是演示链接: http://jsfiddle.net/UnYx9/12/

&#xA;&#xA;

问题:

&#xA;&#xA;
    &#xA;
  • 有时无法加载视频
  • &#xA;
  • 有时它不会显示视频
  • &#xA;
&#xA;&#xA;

如果您建议我采取更好的方法,我将不胜感激

&#xA;

0 个答案:

没有答案