Question

How Could I change the script below so that clickable links to different tabs can be made outside of the ul.tabs?

Any help would be greatly appreciated.

<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>

Code from: http://jsfiddle.net/dhirajbodicherla/TGMDd/2/

Answer 1

It’s already there for you, just specify the goto attribute which matches the href of the tab you want to go to:

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

will go to the tab set up as

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