Working with AJAX tabs

We saw how we can use the add method to add an AJAX tab to the widget dynamically, but we can also add remote content to tabs using the underlying HTML. In this example, we want the tab that will display the remote content to be available all the time, not just after clicking on the button. This example will also only work correctly using a full web server with PHP installed and configured, such as WAMP (PC) or MAMP (Macs).

Add the following new <a> element to the underlying HTML for the widget in tabs16.html:

<li><a href="remoteTab.txt">AJAX Tab</a></li>

We should also remove the <button> from the last example.

The final <script> element can be used to call the tabs method; no additional configuration is required:

$("#myTabs").tabs();

Save this as tabs17.html. All we're doing is specifying the path to the remote file (the same one we used in the earlier example) using the href attribute of an <a> element in the underlying...