How to load jQuery tools plugin only after click

Question

Okay guys what I would like to happen is initialize the jQuery Tool plugin only after one of the anchor tags has been clicked on.

This is what I have in my JS file:

$(".tab-1-tabs ul").tabs("div.tab-1-container > div");

** This is the HTML that gets generated after the script above is called:**

<li><a href="#" class="service current">1</a></li>
<li><a href="#" class="service">2</a></li>
<li><a href="#" class="service">3</a></li>
<li><a href="#" class="service">4</a></li>

The problem with the generated HTML is that there is a class of current that gets injected when the plugin loads and I have CSS styling in place that gives that anchor tag a certain background image that shows it's active. I am also hiding the content of that particular tabs pane.

This is what I think I can do but does not work:

$(".tab-1-tabs ul").tabs("div.tab-1-container > div", { onBeforeClick: function(event, tabIndex) {
        $('.tab-1-tabs ul li a').removeClass('current');
    }
});

I would like to have the page load without the tab functionality loading that applies the current class but instead only load when one of those list items get clicked only then will current get applied to the anchor tag.

I want to give the impression that nothing has been selected unless they click on any of those anchor tags.

Or maybe something like:

$('#link').click(function(e) {
    e.preventDefault();
    $(".tab-1-tabs ul").tabs("div.tab-1-container > div");
});

Answer 1

I think you're looking for something like this:

$("#link").click(function (){
  $.getScript("somescript.js", function(){
   console.log("loaded script");
 });
});

When your link is clicked, $.getScript will load in the script.