jQuery UI Tabs demo

Example of using jQuery UI Tabs

by Brian von Konsky

HTML

<div id="tabs">
    <ul>
        <li><a href="#tabs-Perth">Perth</a></li>
        <li><a href="#tabs-Melbourne">Melbourne</a></li>
        <li><a href="#tabs-PortLouis">Port Loius</a></li>
    </ul>   
    <div id="tabs-Perth">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/5d/Perth_CBD_from_Mill_Point_%282%29.jpg/800px-Perth_CBD_from_Mill_Point_%282%29.jpg" alt="image of perth" width="300" />
        <p class="attribution"> Author: J Harrison ([email protected])</p>
        <p class="attribution"> License: CC-BY-SA 3.0 "</p>
        <p>Perth is the capital of the state of Western Australia, and home to the Bentley campus of Curtin University.</p>
    </div>
    
    <div id="tabs-Melbourne">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Melbourne_Skyline_and_Princes_Bridge_-_Dec_2008.jpg/640px-Melbourne_Skyline_and_Princes_Bridge_-_Dec_2008.jpg" atl="Image of Melbourne" width="300" />
        <p class="attribution"> Author: David Iliff </p>
        <p class="attribution"> License: "CC-BY-SA 3.0" </p>
        <p> Melbourne is the capital of the state of Victoria.</p>
    </div>
    
    <div id="tabs-PortLouis">
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Evening_Port_Louis.jpg/320px-Evening_Port_Louis.jpg" alt="image of Port Louis" width="300"/>
        <p class="attribution"> Author: Peter Kuchar (pkuchar)</p>
        <p class="attribution"> License:CC-BY-SA 3.0 </p>
        <p>Port Loius is the captial of Mauritius, and is near the Charles Telfair Institute.</p>
    </div>
</div>

CSS

.attribution {
    font-size: .7em;
    color: steelblue;
    padding:0;
    margin:0;
}

JavaScript

$(function() {
$( "#tabs" ).tabs();
});