BitGoblin/Bones
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

modified the tab behavior so it works when JS is disabled but CSS is enabled, an accessibility edge-case

Browse Source
This commit is contained in:
Brian Hogan 2011-08-13 12:22:18 -05:00
parent 3d03e14363
commit 76be30c318
2 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
javascripts/app.js
View File

@ -15,13 +15,24 @@ $(document).ready(function() {
================================================== */ ================================================== */
var tabs = $('ul.tabs'); var tabs = $('ul.tabs');
/* hide tab content. Doing this with JS
makes the tabs work when JS is enabled but
CSS is not, an interesting accessibility
edge case. Ensures that "active" is respected.
*/
$("ul.tabs-content > li").each(function(t){
if(!$(this).hasClass("active")){
$(this).hide();
};
});
tabs.each(function(i) { tabs.each(function(i) {
//Get all tabs //Get all tabs
var tab = $(this).find('> li > a'); var tab = $(this).find('> li > a');
tab.click(function(e) { tab.click(function(e) {
//Get Location of tab's content //Get Location of tab's content
var contentLocation = $(this).attr('href') + "Tab"; var contentLocation = $(this).attr('href');
//Let go if not a hashed one //Let go if not a hashed one
if(contentLocation.charAt(0)=="#") { if(contentLocation.charAt(0)=="#") {

1
stylesheets/base.css
View File

@ -254,7 +254,6 @@
border-top-right-radius: 2px; } border-top-right-radius: 2px; }
ul.tabs-content { margin: 0; display: block; } ul.tabs-content { margin: 0; display: block; }
ul.tabs-content > li { display:none; }
ul.tabs-content > li.active { display: block; } ul.tabs-content > li.active { display: block; }
/* Clearfixing tabs for beautiful stacking */ /* Clearfixing tabs for beautiful stacking */