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>