jquery code ceases to work when hosted by an external source

Question

So I have this jquery code which switches tabs in a div when I click on them... I need to host the javascript on an external source, and i've called it in like this:

<script src="(link here).js?auto></script>

And i know it runs because it sets the tabs up properly, but it doesn't switch them. When I click on the tab it opens "http:// #tab1/" instead of "http:// (mywebsite).com/#tab1/"

Here is my code:

$(function () {
$('div.tabgroup').each(function () {
    var $active, $content, $links = $(this).find('a');
    $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
    $active.addClass('active');
    $content = $($active.attr('href'));
    $links.not($active).each(function () {
        $($(this).attr('href')).hide()
    });
    $(this).on('click', 'a', function (e) {
        $active.removeClass('active');
        $content.hide();
        $active = $(this);
        $content = $($(this).attr('href'));
        $active.addClass('active');
        $content.show();
        e.preventDefault()
    })
})
});

How can I make it so it add's the current website url before the link? A live demo of it can be seen here: http://test-theme-one.tumblr.com/test

Answer 1

http://jsfiddle.net/mAuRG/

I applied a class to each of the content areas to simply things. HTML:

<div class="tabgroup"><a href="#home1">#home1</a></div>
<div class="tabgroup"><a href="#home2">#home2</a></div>
<div class="tabgroup"><a href="#home3">#home3</a></div>
<div class="tabgroup"><a href="#home4">#home4</a></div>
<div class="tabgroup"><a href="#home5">#home5</a></div>

<div id="home1" class="content-area">This is #home1's Content</div>
<div id="home2" class="content-area">This is #home2's Content</div>
<div id="home3" class="content-area">This is #home3's Content</div>
<div id="home4" class="content-area">This is #home4's Content</div>
<div id="home5" class="content-area">This is #home5's Content</div>

JS:

$(function () {
    var $tabs = $('div.tabgroup'),
        $links = $tabs.find('a'),
        $active = function(){
                var ret = $links.eq(0);
                $links.each(function(){
                    if ($(this).attr('href') == location.hash){
                        ret = $(this);
                    }
                });
                return ret;
            }(),
        $contentAreas = $('.content-area'),
        $activecontent = $($active.attr('href'));

    $active.addClass('active');
    $contentAreas.hide();
    $activecontent.show();

    $tabs.on('click','a',function(e){
        e.preventDefault();
        $active = $(this);
        $activecontent = $($active.attr('href'));

        $links.removeClass('active');
        $active.addClass('active');

        $contentAreas.hide();
        $activecontent.show();
    });
});