Как открыть вкладки javascript div со ссылкой на страницу

Question

Я пытаюсь использовать ссылку, чтобы открыть специальную вкладку, созданную с помощью div, а вкладки открываются и закрываются с помощью javascript.

Вот закладки и браузер в теги сценария в нижней части:

<div class="span12 module_cont module_tabs">  
     <div class="shortcode_tabs"> 
      <div class="all_heads_cont"> 
       <div class="shortcode_tab_item_title it1 head1 active" data-open="body1">%%LNG_ProductDescription%%</div> 
       <div class="shortcode_tab_item_title it2 head2" id="reviews" data-open="body2">%%LNG_JS_Reviews%%</div> 
       <div class="shortcode_tab_item_title it3 head3" data-open="body3">%%LNG_JS_ProductVideos%%</div> 
       <div class="shortcode_tab_item_title it4 head4" data-open="body4">%%LNG_JS_SimilarProducts%%</div> 
      </div> 
      <div class="all_body_cont"> 
       <div class="shortcode_tab_item_body body1 it1"> 
        <div class="ip"> 
         %%Panel.ProductDescription%% 
        </div> 
       </div> 
       <div class="shortcode_tab_item_body body2 it2"> 
        <div class="ip"> 
         %%Panel.ProductReviews%%        
        </div> 
       </div> 
       <div class="shortcode_tab_item_body body3 it3"> 
        <div class="ip"> 
         %%Panel.ProductVideos%%           
        </div> 
       </div> 
       <div class="shortcode_tab_item_body body4 it4"> 
        <div class="ip"> 
         %%Panel.SimilarProductsByTag%% 
         %%Panel.ProductByCategory%% 
         %%Panel.ProductVendorsOtherProducts%% 
         %%Panel.SimilarProductsByCustomerViews%%    
        </div> 
       </div> 
      </div> 
     </div><!-- .shortcode_tabs -->        
     <script type="text/javascript"> 
      jQuery('.shortcode_tabs').each(function(index) {          
       /* GET ALL HEADERS */ 
       var i = 1; 
       jQuery('.shortcode_tab_item_title').each(function(index) { 
        jQuery(this).addClass('it'+i); jQuery(this).attr('whatopen', 'body'+i); 
        jQuery(this).addClass('head'+i); 
        jQuery(this).parents('.shortcode_tabs').find('.all_heads_cont').append(this); 
        i++; 
       }); 
       /* GET ALL BODY */ 
       var i = 1; 
       jQuery('.shortcode_tab_item_body').each(function(index) { 
        jQuery(this).addClass('body'+i); 
        jQuery(this).addClass('it'+i); 
        jQuery(this).parents('.shortcode_tabs').find('.all_body_cont').append(this); 
        i++; 
       }); 
      }); 
      jQuery('.shortcode_tabs .all_body_cont div:first-child').addClass('active'); 
      jQuery('.shortcode_tabs .all_heads_cont div:first-child').addClass('active'); 

      jQuery('.shortcode_tab_item_title').live('click', function(){ 
       jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active'); 
       jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active'); 
       var whatopen = jQuery(this).attr('data-open'); 
       jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active'); 
       jQuery(this).addClass('active'); 
      }); 

      jQuery('reviews').live('click', function(){ 
       jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_body').removeClass('active'); 
       jQuery(this).parents('.shortcode_tabs').find('.shortcode_tab_item_title').removeClass('active'); 
       var whatopen = jQuery(this).attr('data-open'); 
       jQuery(this).parents('.shortcode_tabs').find('.'+whatopen).addClass('active'); 
       jQuery(this).addClass('active'); 
      });            
     </script>           
</div><!-- .module_cont --> 

Все, что я хочу сделать, это есть ссылка на той же странице, что активирует вкладку обзоры (ID = "обзоры ») и также известен как тело2.

все, что я до сих пор для меня ссылка:

<a href="#reviews">Reviews</a> 

Помощь. Мой мозг болит ...

Answer 1

Вам просто нужно установить связь так, чтобы она не выводила пользователя на новую страницу, а затем настраивала событие щелчка, чтобы открыть вкладку вверх. Пример:

HTML:

<a href='javascript:void(0);' id='reviewLink'>Review Tab</a> 

JavaScript:

$('#reviewLink').click(function() { 
    $('.shortcode_tab_item_body').css({display:'none'}); 
    $('.body2').css({display:'none'}); 
}); 

Или jsfiddle здесь:. http://jsfiddle.net/tKLhn/