{"id":33091230,"url":"https://github.com/JangoSteve/jQuery-EasyTabs","last_synced_at":"2025-11-16T14:00:46.238Z","repository":{"id":1030143,"uuid":"858349","full_name":"JangoSteve/jQuery-EasyTabs","owner":"JangoSteve","description":"Easy and flexible jQuery tabbed functionality without all the styling.","archived":false,"fork":false,"pushed_at":"2018-08-13T09:11:18.000Z","size":718,"stargazers_count":551,"open_issues_count":119,"forks_count":199,"subscribers_count":31,"default_branch":"master","last_synced_at":"2025-10-24T11:43:14.514Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.alfajango.com/blog/jquery-easytabs-plugin/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JangoSteve.png","metadata":{"files":{"readme":"README.markdown","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2010-08-24T04:37:49.000Z","updated_at":"2025-07-24T07:32:10.000Z","dependencies_parsed_at":"2022-07-06T03:00:38.644Z","dependency_job_id":null,"html_url":"https://github.com/JangoSteve/jQuery-EasyTabs","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/JangoSteve/jQuery-EasyTabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JangoSteve%2FjQuery-EasyTabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JangoSteve%2FjQuery-EasyTabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JangoSteve%2FjQuery-EasyTabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JangoSteve%2FjQuery-EasyTabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JangoSteve","download_url":"https://codeload.github.com/JangoSteve/jQuery-EasyTabs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JangoSteve%2FjQuery-EasyTabs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":284719042,"owners_count":27052182,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-16T02:00:05.974Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-11-14T18:00:23.173Z","updated_at":"2025-11-16T14:00:46.216Z","avatar_url":"https://github.com/JangoSteve.png","language":"JavaScript","readme":"# [JQuery EasyTabs Plugin](http://www.alfajango.com/blog/jquery-easytabs-plugin/)\n\n*Tabs with(out) style.*\n\nEasyTabs creates tabs with all the functionality, no unwanted changes\nto your markup, and no hidden styling.\n\nUnlike jQuery UI tabs, which style and arrange your tabs and panels for you, this plugin handles only the functionality of the tabs. By leaving the styling and layout up to you, it is much easier to style and arrange your tabs the way you want.\n\n## What EasyTabs Does:\n\n* Creates tabs from an unordered list, which link to divs on the page\n* Allows complete customization of appearance, layout, and style via CSS\n* Supports forward- and back-button in browsers\n* Tabs are bookmarkable and SEO-friendly\n* Tabs can be cycled at a specified interval\n\n## What EasyTabs Does NOT Do:\n\n* Style your tabs in any way (though sensible CSS defaults can be found\n  in the demos)\n\n## Show Your Support\n\n\u003ctable style=\"width: 100%;\"\u003e\n\u003ctr\u003e\n\u003ctd\u003e\nShow your support for jQuery EasyTabs, by helping us raise money for the Karmanos Cancer\nInstitute.\n\u003c/td\u003e\n\u003ctd style=\"text-align: left; width: 35%;\"\u003e\n\u003ca href='http://pledgie.com/campaigns/15528'\u003e\u003cimg alt='Click here to lend your support to: Karmanos Cancer Institute by Alfa Jango and make a donation at www.pledgie.com !' src='http://pledgie.com/campaigns/15528.png?skin_name=chrome' border='0' /\u003e\u003c/a\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## Documentation\n\n* Installation\n* Stylization\n* Configuration Options\n* Demos\n\n## Installation\n\n### The HTML\n\nUnlike JQuery UI tabs, the HTML markup for your tabs and content can be arranged however you want. At the minimum, you need a container, an unordered list of links for your tabs, and matching divs for your tabbed content.\n\n    \u003cdiv id=\"tab-container\"\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#tab-1-div\"\u003eTab 1\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#that-other-tab\"\u003eThe Second Tab\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#lastly\"\u003eTab C\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n      \u003cdiv id=\"tab-1-div\"\u003e\n        \u003ch2\u003eHeading 1\u003c/h2\u003e\n        \u003cp\u003eThis is the content of the first tab.\u003c/p\u003e\n      \u003c/div\u003e\n        \u003cdiv id=\"that-other-tab\"\u003e\n        \u003ch2\u003eHeading 2\u003c/h2\u003e\n        \u003cp\u003eStuff from the second tab.\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv id=\"lastly\"\u003e\n        \u003ch2\u003eHeading 3\u003c/h2\u003e\n        \u003cp\u003eMore stuff from the last tab.\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\n### The Javascript\n\nTo enable back- and forward-button support for the users' browsers, be sure to include either the [jQuery HashChange plugin](http://benalman.com/projects/jquery-hashchange-plugin/) (recommended) or the [Address plugin](http://www.asual.com/jquery/address/docs/) before including the EasyTabs plugin. There is no other configuration required, it will just work!\n\n    \u003cscript src=\"/javascripts/jquery.js\" type=\"text/javascript\"\u003e\u003c/script\u003e \n    \u003cscript src=\"/javascripts/jquery.hashchange.js\" type=\"text/javascript\"\u003e\u003c/script\u003e \n    \u003cscript src=\"/javascripts/jquery.easytabs.js\" type=\"text/javascript\"\u003e\u003c/script\u003e  \n    \n    \u003cscript type=\"text/javascript\"\u003e \n      $(document).ready(function(){ $('#tab-container').easytabs(); });\n    \u003c/script\u003e \n\nI varied the tab ids and names just to show you how flexible this is. There is no magic going on with this plugin; it's not trying to guess the order of your tabs or what tab is associated with which `\u003cdiv\u003e`. Just make the id of the content `\u003cdiv\u003e` match the href of the tab link.\n\n### Required Markup\n\nThe only rules you need to follow are these:\n\n* containing `\u003cdiv\u003e` with a unique id\n* the container `\u003cdiv\u003e` contains an unordered list `\u003cul\u003e` of links `\u003ca\u003e`\n\n(UPDATE: As of version 1.1, this is no longer the case. You can now include your tabs anywhere within the container. It can be a `\u003cul\u003e`, `\u003col\u003e`, `\u003cdiv\u003e`, or anything you want. The default is still a top-level `\u003cul\u003e`, so to change it you just specify your selector with the new \"tabs\" option.)\n\n* the container div also contains content divs (for the tabbed content), each div has a unique id that matches the href property of a link in the unordered list\n\nOther than that, go nuts. The order of the elements does NOT matter. Your `\u003cul\u003e` could be before or after the content divs (or even between them). You can put non-tabbed content between the elements. It doesn't matter. The most common structure (for inspiration's sake) is something like this:\n\n    div#tab-container ul \u003e ( li \u003e a[href=\"tab-1\"], li \u003e a[href=\"second-tab\"] )\n    div#tab-container div#tab-1\n    div#tab-container div#second-tab\n\n    +---------------------------------------------------------------------------+\n    |                              div#tab-container                            |\n    |  +---------------------------------------------------------------------+  |\n    |  |                                  ul                                 |  |\n    |  |  +-----------------------------+    +----------------------------+  |  |\n    |  |  |             li              |    |             li             |  |  |\n    |  |  |  +-----------------------+  |    |  +----------------------+  |  |  |\n    |  |  |  |    a[href=\"tab-1\"]    |  |    |  | a[href=\"second-tab\"] |  |  |  |\n    |  |  |  +-----------------------+  |    |  +----------------------+  |  |  |\n    |  |  +-----------------------------+    +----------------------------+  |  |\n    |  +---------------------------------------------------------------------+  |\n    |                                                                           |\n    |  +---------------------------------------------------------------------+  |\n    |  |                               div#tab-1                             |  |\n    |  +---------------------------------------------------------------------+  |\n    |                                                                           |\n    |  +---------------------------------------------------------------------+  |\n    |  |                             div#second-tab                          |  |\n    |  +---------------------------------------------------------------------+  |\n    |                                                                           |\n    +---------------------------------------------------------------------------+\n\n-------------------------------------------------------------------------------------------\n\nFor stylization, configuration options, and live demos, see the [EasyTabs homepage](http://www.alfajango.com/blog/jquery-easytabs-plugin/).\n\n-------------------------------------------------------------------------------------------\n\n## Links\n\n* [Full Documentation and Demos](http://www.alfajango.com/blog/jquery-easytabs-plugin/)\n* [Updates and new features for v1.1.2](http://www.alfajango.com/blog/jquery-easytabs-plugin-now-more-flexible-and-usable)\n* [Updates and new features for v2.0](http://www.alfajango.com/blog/jquery-easytabs-plugin-v2)\n* [Updates and new features for v2.1.2](http://www.alfajango.com/blog/jquery-easytabs-plugin-v2-1-2/)\n* [Download jQuery EasyTabs](http://plugins.jquery.com/project/easytabs)\n* [Fork and view source code](http://github.com/JangoSteve/jQuery-EasyTabs)\n\n## Info\n\n* Author: [Steve Schwartz](https://github.com/JangoSteve)\n* Company: [Alfa Jango, LLC](http://www.alfajango.com)\n* License: Dual licensed under the [MIT](http://www.opensource.org/licenses/mit-license.php) and [GPL](http://www.gnu.org/licenses/gpl.html) licenses.\n","funding_links":[],"categories":["30. 选项卡(Tabs) ##","30. 选项卡(Tabs)"],"sub_categories":["13.20 视差滚动(Parallax Scrolling) ###","24.3 Web Sockets"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJangoSteve%2FjQuery-EasyTabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJangoSteve%2FjQuery-EasyTabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJangoSteve%2FjQuery-EasyTabs/lists"}