How to make a tab interface with jquery

The optional tabbed interface is one of the larger UI components that are applied to the local desktop . Luckily, jQueryUI makes them easy to implement. Here's how to get them up and running quickly.

The basic structure of HTML is as follows:

<div id= "Tab_wrapper" >
       <ul>
              <li><a href= "#tab1" >tab 1</li>
              <li> <a href= "#tab2" >tab 2</li>
       </ul>
       <div id= "tab1" >
              tab 1 content here ...
       </div1>
       <div id= "tab2" >
              tab 2 content here ...
       </div1>
</div>

These anchors are designated as labels by a single ID div, and the list of labels is displayed on the page tab. When a user clicks a link, it selects the tab. Only a single line of jquery code can transform this HTML into a tabbed interface:

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

The

. By using the anchor point to the ID of another page, instead of an item on the screen, click Tab it loads the resource automatically, and the content is loaded with Ajax. demo code: handles errors on a server that has a fallback function.