{"id":21396837,"url":"https://github.com/posixpascal/tabu","last_synced_at":"2026-01-02T19:34:42.010Z","repository":{"id":142927116,"uuid":"48581910","full_name":"posixpascal/tabu","owner":"posixpascal","description":"NoScript CSS only tab library.","archived":false,"fork":false,"pushed_at":"2015-12-25T14:02:50.000Z","size":48,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-09T00:39:52.391Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/posixpascal.png","metadata":{"files":{"readme":"README.html","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-25T13:50:02.000Z","updated_at":"2015-12-25T13:50:29.000Z","dependencies_parsed_at":"2023-03-24T18:48:51.836Z","dependency_job_id":null,"html_url":"https://github.com/posixpascal/tabu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posixpascal%2Ftabu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posixpascal%2Ftabu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posixpascal%2Ftabu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posixpascal%2Ftabu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posixpascal","download_url":"https://codeload.github.com/posixpascal/tabu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243885888,"owners_count":20363644,"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","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":"2024-11-22T14:29:32.881Z","updated_at":"2026-01-02T19:34:41.978Z","avatar_url":"https://github.com/posixpascal.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\t\u003cmeta charset=\"utf-8\"/\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003ch1 id=\"tabu\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/posixpascal/tabu/master/p.png\" alt=\"tabu\" /\u003e\u003c/h1\u003e\n\n\u003cp\u003eA noscript tab library written with only CSS.\nOn top of it, it offers a nice JavaScript API for non-noscript users.\nThe JavaScript API isn\u0026#8217;t finished yet.\u003c/p\u003e\n\n\u003ch3 id=\"maintainer\"\u003eMaintainer\u003c/h3\u003e\n\n\u003cp\u003e\u003ca href=\"https://github.com/posixpascal\"\u003ePascal Raszyk\u003c/a\u003e\u003c/p\u003e\n\n\u003ch3 id=\"getstarted\"\u003eGet Started\u003c/h3\u003e\n\n\u003cp\u003eInstall dependencies\u003c/p\u003e\n\n\u003cp\u003e\u003ccode\u003esudo npm install \u0026amp;\u0026amp; bower install\u003c/code\u003e\u003c/p\u003e\n\n\u003cp\u003eBuild Project\u003c/p\u003e\n\n\u003cp\u003e\u003ccode\u003egrunt\u003c/code\u003e\u003c/p\u003e\n\n\u003cp\u003eRun Tests\u003c/p\u003e\n\n\u003cp\u003eOpen \u003ccode\u003eSpecRunner.html\u003c/code\u003e in your browser and test with jasmine\u003c/p\u003e\n\n\u003ch3 id=\"howtouse\"\u003eHow to use\u003c/h3\u003e\n\n\u003cpre\u003e\u003ccode class=\"html\"\u003e    \u0026lt;!-- It's important to add a .noscript class to your body in order to use this script --\u0026gt;\n    \u0026lt;body class=\u0026quot;noscript\u0026quot;\u0026gt;\n    \n\n        \u0026lt;div data-tabu=\u0026quot;section_1\u0026quot;\u0026gt;\n            \u0026lt;a href=\u0026quot;#tab1\u0026quot;\u0026gt;\n                \u0026lt;label for=\u0026quot;tab1\u0026quot;\u0026gt;\n                    Tab 1\n                \u0026lt;/label\u0026gt;\n            \u0026lt;a href=\u0026quot;#tab2\u0026quot;\u0026gt;\n                \u0026lt;label for=\u0026quot;tab2\u0026quot;\u0026gt;\n                    Tab 2\n                \u0026lt;/label\u0026gt;\n            \u0026lt;/a\u0026gt;\n            \u0026lt;a href=\u0026quot;#tab3\u0026quot;\u0026gt;\n                \u0026lt;label for=\u0026quot;tab3\u0026quot;\u0026gt;\n                    Tab 3\n                \u0026lt;/label\u0026gt;\n            \u0026lt;/a\u0026gt;\n        \u0026lt;/div\u0026gt;\n\n        \u0026lt;div data-tabu-content=\u0026quot;section_1\u0026quot;\u0026gt;\n            \u0026lt;input type=\u0026quot;radio\u0026quot; checked name=\u0026quot;section_1\u0026quot; id=\u0026quot;tab1\u0026quot; data-tabu-tab=\u0026quot;tab1\u0026quot;\u0026gt;\n            \u0026lt;a name=\u0026quot;tab1\u0026quot;\u0026gt;\n                This is the content for the first tab.\n                Also this tab is active by default.\n            \u0026lt;/a\u0026gt;\n        \u0026lt;/div\u0026gt;\n\n        \u0026lt;div data-tabu-content=\u0026quot;section_1\u0026quot;\u0026gt;\n            \u0026lt;input type=\u0026quot;radio\u0026quot; name=\u0026quot;section_1\u0026quot; id=\u0026quot;tab2\u0026quot; data-tabu-tab=\u0026quot;tab2\u0026quot;\u0026gt;\n            \u0026lt;a name=\u0026quot;tab2\u0026quot;\u0026gt;\n                This is the content for the second tab.\n            \u0026lt;/a\u0026gt;\n        \u0026lt;/div\u0026gt;\n\n        \u0026lt;div data-tabu-content=\u0026quot;section_1\u0026quot;\u0026gt;\n            \u0026lt;input type=\u0026quot;radio\u0026quot; name=\u0026quot;section_1\u0026quot; id=\u0026quot;tab3\u0026quot; data-tabu-tab=\u0026quot;tab3\u0026quot;\u0026gt;\n            \u0026lt;a name=\u0026quot;tab3\u0026quot;\u0026gt;\n                And this is the last tab.\n            \u0026lt;/a\u0026gt;\n        \u0026lt;/div\u0026gt;\n\n\n    \u0026lt;/body\u0026gt;\n\u003c/code\u003e\u003c/pre\u003e\n\n\u003ch3 id=\"howitworks\"\u003eHow it works\u003c/h3\u003e\n\n\u003cp\u003eThe tab navigation is build with labels which trigger radio inputs in the content area.\nI\u0026#8217;m using the CSS sibling selector \u003ccode\u003e+\u003c/code\u003e to match the next \u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e block and set it\u0026#8217;s display attribute to block.\nThe label tags are wrapped with an additional \u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e tag to change the URL after selecting the tab.\u003c/p\u003e\n\n\u003cp\u003eUnfortunately it\u0026#8217;s not possible to select the current active link using CSS . :(. So it\u0026#8217;s not possible for users to save the tab state in the URL.\u003c/p\u003e\n\n\u003ch3 id=\"license\"\u003eLicense\u003c/h3\u003e\n\n\u003cp\u003eThe MIT License (MIT)\u003c/p\u003e\n\n\u003cp\u003eCopyright (c) 2015 Pascal Raszyk\u003c/p\u003e\n\n\u003cp\u003ePermission is hereby granted, free of charge, to any person obtaining a copy of\nthis software and associated documentation files (the \u0026#8220;Software\u0026#8221;), to deal in\nthe Software without restriction, including without limitation the rights to\nuse, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of\nthe Software, and to permit persons to whom the Software is furnished to do so,\nsubject to the following conditions:\u003c/p\u003e\n\n\u003cp\u003eThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\u003c/p\u003e\n\n\u003cp\u003eTHE SOFTWARE IS PROVIDED \u0026#8220;AS IS\u0026#8221;, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS\nFOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR\nCOPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER\nIN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN\nCONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\u003c/p\u003e\n\n\u003c/body\u003e\n\u003c/html\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposixpascal%2Ftabu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposixpascal%2Ftabu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposixpascal%2Ftabu/lists"}