I have the following markup:
<body>
<div id="tabs" style="float: left">
<ul>
<li><a href="ajax/question_0.html" title="Question 1"><span>Question 1</span></a></li>
<li><a href="ajax/question_1.html" title="Question 2"><span>Question 2</span></a></li>
<li><a href="ajax/question_2.html" title="Question 3"><span>Question 3</span></a></li>
<li><a href="ajax/question_3.html" title="Question 4"><span>Question 4</span></a></li>
<li><a href="ajax/question_4.html" title="Question 5"><span>Question 5</span></a></li>
<li><a href="ajax/question_5.html" title="Question 6"><span>Question 6</span></a></li>
</ul>
<div id="dynamicContent">
</div>
</div>
<div class="demo-description">
<p>Click tabs to see answers to Questions</p>
</div>
</body>
I would like to utilize an accordion or the tabs plugin from the UI. Upon completion of the load event, I'd like to call a JavaScript function, but a different function for each tab -- almost like calling onDocumentReady for a page.
I have the following JavaScript:
$(function() {
$('#tabs').tabs().bind('tabsselect', function(event, ui) {
console.log("Loading: ajax/question_" + ui.index + ".html");
return true; //Ensure that the tab gets selected
});
);
That's properly loading the Ajax file and all, but whenever I attempt to do something such as evaluating a statement in the JS, it seems to be ignored. Is there any way I can do this, so that once the file is loaded my function is called -- needs to be a different function for each tab.
