Jquery 试图突出显示选定的div，并在隐藏div时自动暂停youtube视频

TL；这里是DEMO博士-

希望有人能帮助我，因为这是煎炸我的大脑

我正在构建一个视频页面，其中嵌入了5个YouTube视频。一次只能看到其中一个视频。有顶部导航（选择每个视频）和侧面导航（再次选择视频）。除此之外，底部还有导航（在视频div下面），用于选择视频内容或显示隐藏的div（替换视频div），其中包含照片

因此，我面临的问题是：

1） 。当通过导航选择另一个视频时，我无法使视频自动暂停

2） 。选择时，顶部导航和侧面导航（与视频链接相同）不会同时高亮显示

3） 。当选择底部导航（用于照片）时，我不知道如何禁用视频链接（5）并用5个照片div替换这些链接

HTML
====
<div class="Video">

<div class="VideoTop">
<ul class="nav-tabs">
<li class="active"><a href=".tab1">Tab 1</a></li>
<li><a href=".tab2">Tab 2</a></li>
<li><a href=".tab3">Tab 3</a></li>
<li><a href=".tab4">Tab 4</a></li>
<li><a href=".tab5">Tab 5</a></li>
</ul>
</div>

<div class="VideoSide">
<ul class="nav-tabs">
<li class="active"><a href=".tab1">Tab 1</a></li>
<li><a href=".tab2">Tab 2</a></li>
<li><a href=".tab3">Tab 3</a></li>
<li><a href=".tab4">Tab 4</a></li>
<li><a href=".tab5">Tab 5</a></li>
</ul>
</div>

<div id="video-div">
<section class="tab-content tab1 active">
<iframe id="player1" width="350" height="197" src="//www.youtube.com/embed/dg4rylxSg5c?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</section>

<section class="tab-content tab2 hide">
<iframe id="player2" width="350" height="197" src="//www.youtube.com/embed/IQgS3lcpWLQ?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</section>

<section class="tab-content tab3 hide">
<iframe id="player3" width="350" height="197" src="//www.youtube.com/embed/E07tybE1sPE?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</section>

<section class="tab-content tab4 hide">
<iframe id="player4" width="350" height="197" src="//www.youtube.com/embed/FZ5Ua0e2ZIw?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</section>

<section class="tab-content tab5 hide">
<iframe id="player5" width="350" height="197" src="//www.youtube.com/embed/ZpAEWbopYl8?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</section>

<section class="tab-content tab6 hide">
<a href="link1.html"><img src="http://www.clickerzoneuk.co.uk/cz/wp-content/uploads/2010/10/PuppySmall.jpg" /></a>
<a href="link2.html"><img src="http://www.clickerzoneuk.co.uk/cz/wp-content/uploads/2010/10/AkitaPuppies-300x162.jpg" /></a>
<a href="link3.html"><img src="http://www.clickerzoneuk.co.uk/cz/wp-content/uploads/2010/10/DogBathing-300x198.jpg" /></a>
</section>


</div>

<div class="viewTabs">
<ul class="nav-tabs">
<li class="active"><a href=".tab1">View Video</a></li>
<li><a href=".tab6">View Photos</a></li>
</ul>
</div>

<section class="tab-content tab1 active">
<div class="Box1">
<p>Text box 1</p>
</div>
</section>

<section class="tab-content tab2 hide">
<div class="Box2">
<p>Text box 2</p>
</div>
</section>

<section class="tab-content tab3 hide">
<div class="Box3">
<p>Text box 3</p>
</div>
</section>

<section class="tab-content tab4 hide">
<div class="Box4">
<p>Text box 4</p>
</div>
</section>

<section class="tab-content tab5 hide">
<div class="Box5">
<p>Text box 5</p>
</div>
</section>

</div>

CSS
====

.Video  {background:#000;  padding: 15px;}
.VideoTop   {margin-bottom:15px}
.VideoTop ul    {margin-bottom: 5px;}
.VideoTop li    {display: inline;font-size: 14px;}
.VideoTop a {background: #434343; text-transform:uppercase}
.VideoSide {float:right; width:32%;}
.VideoSide li {display: block;margin-bottom: 1px;}
.VideoSide a    {background: #434343; text-transform:uppercase}
.viewTabs   {background:#000;  padding: 5px;}
.viewTabs ul    {margin-top:5px}
.viewTabs li    {display:inline; font-size:14px;}
.viewTabs a {background:#434343; text-transform:uppercase; padding:5px;}
.nav {list-style: none;}
.nav > li > a {display: block;}
.VideoSide a    {padding: 26px 20px 18px 20px;display: block;height: 25px;}
.VideoTop a {padding: 7px 16px 7px 15px;display: inline;}
.nav-tabs > .active > a {color: #fff;cursor: default;background-color: #666;}
.nav-tabs a:hover   {background:#000;color:#fff;}
.tab-content.active {display: block;}
.tab-content.hide {display: none;}
#video-div  {min-height:350px;} 
#video-div  img {margin:15px}
img.rightFloat  {float:right}

JQUERY
======

$(document).ready(function() {
    $('.nav-tabs > li > a').click(function(event){
    event.preventDefault();//stop browser to take action for clicked anchor

    //get displaying tab content jQuery selector
    var active_tab_selector = $('.nav-tabs > li.active > a').attr('href');                  

    //find active navigation and remove 'active' css
    var actived_nav = $('.nav-tabs > li.active');
    actived_nav.removeClass('active');

    //add 'active' css into clicked navigation
    $(this).parents('li').addClass('active');

    //hide displaying tab content
    $(active_tab_selector).removeClass('active');
    $(active_tab_selector).addClass('hide');

    //show target tab content
    var target_tab_selector = $(this).attr('href');
    $(target_tab_selector).removeClass('hide');
    $(target_tab_selector).addClass('active');
     });
  });
$(function() {
/* elt: Optionally, a HTMLIFrameElement. This frame's video will be played,
 *       if possible. Other videos will be paused*/
function playVideoAndPauseOthers(frame) {
    $('iframe[src*="http://www.youtube.com/embed/"]').each(function(i) {
        var func = this === frame ? 'playVideo' : 'pauseVideo';
        this.contentWindow.postMessage('{"event":"command","func":"' + func +         '","args":""}', '*');
    });
}
$('.ultimateOrgasmVideo a[href^=".tab"]').click(function() {
    var frameId = /.tab(\d+)/.exec($(this).attr('href'));
    if (frameId !== null) {
        frameId = frameId[1]; // Get frameId
        playVideoAndPauseOthers($('#video-div' + frameId + ' iframe')[0]);
    }
});
});

HTML
====


















文本框1

文本框2

文本框3

文本框4

文本框5

CSS
====
.Video{背景：#000；填充：15px；}
.VideoTop{页边距底部：15px}
.VideoTop ul{页边距底部：5px；}
.VideoTop li{显示：内联；字体大小：14px；}
.VideoTop a{背景：#434343；文本转换：大写}
.VideoSide{float:右；宽度：32%；}
.VideoSide li{显示：块；页边距底部：1px；}
.VideoSide a{背景：#434343；文本转换：大写}
.viewTabs{background:#000；padding:5px；}
.viewTabs ul{页边距顶部：5px}
.viewTabs li{显示：内联；字体大小：14px；}
.viewTabs a{背景：#434343；文本转换：大写；填充：5px；}
.nav{列表样式：无；}
.nav>li>a{display:block；}
.VideoSide a{填充：26px 20px 18px 20px；显示：块；高度：25px；}
.VideoTop a{padding:7px 16px 7px 15px；display:inline；}
.nav tabs>.active>a{color:#fff；光标：默认值；背景色：#666；}
.nav选项卡a:悬停{背景：#000；颜色：#fff；}
.tab-content.active{display:block；}
.tab-content.hide{display:none；}
#视频分区{最小高度：350px；}
#视频分区img{边距：15px}
img.rightFloat{float:right}
JQUERY
======
$（文档）.ready（函数（）{
$（'.nav tabs>li>a'）。单击（函数（事件）{
event.preventDefault（）；//停止浏览器以对单击的锚执行操作
//获取显示选项卡内容jQuery选择器
var active_tab_selector=$（'.nav tabs>li.active>a'）.attr（'href'）；
//查找活动导航并删除“活动”css
var actived_nav=$（'.nav tabs>li.active'）；
主动导航removeClass（“主动”）；
//将“活动”css添加到单击的导航中
$（this）.parents（'li'）.addClass（'active'）；
//隐藏显示选项卡内容
$（活动选项卡选择器）。移除类（“活动”）；
$（活动选项卡选择器）.addClass（'hide'）；
//显示目标选项卡内容
var target_tab_selector=$（this.attr（'href'）；
$（目标选项卡选择器）.removeClass（'hide'）；
$（目标选项卡选择器）.addClass（'active'）；
});
});
$（函数（）{
/*elt：可选，一个HTMLIFrameElement。将播放此帧的视频，
*如果可能，其他视频将暂停*/
功能播放视频和暂停其他（帧）{
$（'iframe[src*=”http://www.youtube.com/embed/“]”）。每个（功能（i）{
var func=this==frame？'playVideo'：'pauseVideo'；
this.contentWindow.postMessage（“{”事件“：”命令“，”函数“：”+func+”，“参数“：”}'，“*”）；
});
}
$（'.Ultimate高潮视频[href^=“.tab”]”）。单击（函数（）{
var frameId=/.tab（\d+/.exec（$（this.attr（'href'））；
if（frameId！==null）{
frameId=frameId[1]；//获取frameId
播放视频和暂停其他（$（“#视频div”+frameId+“iframe”）[0]）；
}
});
});