Here's some very basic styling to get you started:ĮasyTabs will simply add the active class to the currently selected tab and panel. To style your tabs, you simply use your own CSS and stylesheet. You could even put the tabs inside one of the panels! It doesn't matter. You can put non-tabbed content between the elements. Your tabs could be before or after the panels. The order of the elements does NOT matter. the container also contains panel divs (for the tabbed content), each div has a unique id that matches the href property of a link in the tab collection.the container contains a collection (a by default) of links.The only rules you need to follow are these: Minor version of jQuery is actively supported (1.10 at this time).

NOTE: Easytabs works with jQuery 1.4.3 and greater, but only the latest Does not style your tabs in any way (either through javascript or.Open-source and dual licensed under the MIT and GPL licenses.Written in jQuery plugin format, chain-able with other jQuery commands.Can have multiple EasyTabs instances on one page.Tabs can automatically cycle at a specified interval.Loads AJAX content, or anything not already on the page.Supports back-button and forward-button in browsers.Allows complete customization of appearance, layout, and style via CSS.Provides smooth transitions between panels when tab is selected.Lightweight: the minified version is only 8KB - vs 20KB for only the jQueryUI core + tabs widget.Why you should use EasyTabs (in bullets): EasyTabs leaves the styling up to you, andĭoesn't mangle your HTML markup. So, why use this instead of jQuery UI tabs? Besides the fact, that jQuery UI includes a bunch of other stuff, jQuery UI says your tabs should look like this:īut sometimes you want your tabs to look like this: What the hell? This raptor wasn't here before! You can make them whatever you want, there's no magic here. The class names above are just to make it easy to style. This is standard semantic markup for in-page anchors. Id of the target panel (panels must be referenced by id, not class). Make sure the tab href attributes match the At the minimum, you need a container, a collection of links for your tabs (an unordered list by default), and matching divs for your tabbed content. The HTML markup for your tabs and content can be arranged however you want. HTML Markup Required JS Example CSS HTML Markup for these tabs JS for these tabs CSS Styles for these tabs

Span master plugin