jQuery - 链接到ul.tabs之外的选项卡

Question

如何更改下面的脚本，以便可以在ul.tabs之外创建可点击链接到不同的选项卡？

任何帮助将不胜感激。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var $tabContent = $(".tab-content"), 
      $tabs = $("ul.tabs li"), 
      tabId; 

     $tabContent.hide(); 
     $("ul.tabs li:first").addClass("active").show(); 
     $tabContent.first().show(); 

     $tabs.click(function() { 
      var $this = $(this); 
      $tabs.removeClass("active"); 
      $this.addClass("active"); 
      $tabContent.hide(); 
      var activeTab = $this.find("a").attr("href"); 
      $(activeTab).fadeIn(); 
      //return false; 
     }); 

     // Grab the ID of the .tab-content that the hash is referring to 
     tabId = $(window.location.hash).closest('.tab-content').attr('id'); 

     // Find the anchor element to "click", and click it 
     $tabs.find('a[href=#' + tabId + ']').click(); 
    }) 

    $('a').not('.tabs li a').on('click', function(evt) { 
     evt.preventDefault(); 
     var whereTo = $(this).attr('goto'); 
     $tabs = $("ul.tabs li"); 
     $tabs.find('a[href=#' + whereTo + ']').trigger('click'); 
     //alert(attr('name')); 
    //alert($('#'+whereTo+' a').offset().top); 
     $('html, body').animate({ 
      scrollTop: $('#'+whereTo+' a').offset().top 
     }); 

    }); 

    $(function() { 
     $('a.refresh').live("click", function() { 
      location.reload(); 
     }); 
    }); 
</script> 

代码来自：http://jsfiddle.net/dhirajbodicherla/TGMDd/2/

Answer 1

它已经在你身边，只是指定要转到标签的href匹配goto属性：

<a href="#" goto="my_tab">Clicky</a> 

会去标签设置为

<ul class="tabs"> 
    <li><a href="#my_tab">It goes here</a></li>