Как настроить Табы jQuery ?

  <script>     
(function($) {
$(function() {
  $('ul.tabs').delegate('li:not(.current)', 'click', function() {
    $(this).addClass('current').siblings().removeClass('current')
      .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150);
  })
})
})(jQuery);
   </script>        

            <div class="tabs-sidebar player-block">    
		<div class="player-section">
			<ul class="tabs nowrap ns tabs">
            
                 [xfgiven_film]<li class="current" id="tab_movie">Смотреть</li>[/xfgiven_film]
                 [xfgiven_treyler]<li id="tab_trayler">Трейлер</li>[/xfgiven_treyler]
            </ul>
	
				
	        <div class="k-rate-full" style="text-shadow: #000 1px 1px 1px; background: #1b201e;border: 2px solid #383F59;">{rating}</div>	
		    <div style="clear:both"></div>

            [xfgiven_film]
            <div class="box one_box" style="display: block; background: rgb(0, 0, 0); ">
            <div class="player-box visible full-text">
		    <iframe width="853" height="480" src="[xfvalue_film]?season=[xfvalue_se]&nocontrols_seasons=1" frameborder="0" allowfullscreen></iframe>
        	<!-- это фильм -->
			</div>
            </div>
            [/xfgiven_film]
            
            
            [xfgiven_treyler] 
            <div class="box two_box" style=" background: rgb(0, 0, 0); ">
            <div class="player-box full-text" id="trailer-place">
            <div id="player"></div> 
            <iframe src="/player/playerjs.html?file=https://www.youtube.com/watch?v=[xfvalue_treyler]" type="text/html" width=400 height=300 frameborder="0" allowfullscreen></iframe>
				<!-- это трейлер. строго тут -->
		    </div>
            </div>
            [/xfgiven_treyler]