Answered Jquery UI tabs pulling incorrect html through web page

$("#productTabs UL LI A").each(function() {
    $(this).attr("href", location.href.toString()+$(this).attr("href"));
});
$("#productTabs").tabs();

<ul class="Tabbed Control">
    <li class="Tab Active">
        <a class="Name">Resources</a>
        <div class="Content">
            <p>Content - resources tab</p>
        </div>
    </li>
    <li class="Tab">
        <a class="Name">Elements</a>
        <div class="Content">
            <p>Content - elements tab</p>
        </div>
    </li>
    <li class="Tab">
        <a class="Name">Files</a>
        <div class="Content">
            <p>Content - files tab</p>            
        </div>
    </li>
</ul>

    #TabbedContainer > .Tabbed.Control {
        position:relative; 
        width:/* whatever */; 
        height:/* whatever */;
    }


    .Tabbed.Control > .Tab {
        position:static;
        display:inline-block;
    }
    .Tabbed.Control > .Tab > .Name {
        display:block; 
    }
    .Tabbed.Control > .Tab > .Content {
        position:absolute; 
        left:0;
        display:none; 
        width:100%;
        max-height: /* if you want a height limit. */
        overflow:auto; /* if height limit is set */
    }
    .Tabbed.Control > .Tab.Active > .Name {
        background-color:#000000; color:#ffffff;
    }
    .Tabbed.Control > .Tab.Active > .Content { 
        display:block; 
    } 

<script>
$('body').on('click', '.Tab', function(event){
    event.preventDefault();
    $('.Tab').removeClass('Active');
    $(this).addClass('Active');
})
</script>