How to Use jQuery as a tab Interface

The option card interface is one of the UI components with large local desktop applications. Fortunately, jQueryUI makes them easy to implement. The following describes how to make them start quickly and run properly.

The basic structure of HTML is as follows:

<Div id = "tab_wrapper"> <ul> <li> <a href = "# tab1"> Tab 1 </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>

Use a div with a single ID to specify these anchors as labels. The tag list is displayed on the webpage tab. When you click a link, it selects this tab. Only a short line of jQuery code can convert this HTML into an option-style interface:

$ (Function () {$ ("# tab_wrapper"). tabs ();});

More concise code! We can even implement further functions. This document shows more functions, but I think it is most useful to load data from external sources. By using the anchor point to the ID of another page, instead of the project on the screen, it automatically loads resources when you click the tab and the content is loaded through AJAX. The Demo code shows that you can easily handle errors on servers with the rollback function.