modified the tab behavior so it works when JS is disabled but CSS is enabled, an accessibility edge-case
This commit is contained in:
parent
3d03e14363
commit
76be30c318
@ -15,13 +15,24 @@ $(document).ready(function() {
|
||||
================================================== */
|
||||
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) {
|
||||
//Get all tabs
|
||||
var tab = $(this).find('> li > a');
|
||||
tab.click(function(e) {
|
||||
|
||||
//Get Location of tab's content
|
||||
var contentLocation = $(this).attr('href') + "Tab";
|
||||
var contentLocation = $(this).attr('href');
|
||||
|
||||
//Let go if not a hashed one
|
||||
if(contentLocation.charAt(0)=="#") {
|
||||
|
@ -254,7 +254,6 @@
|
||||
border-top-right-radius: 2px; }
|
||||
|
||||
ul.tabs-content { margin: 0; display: block; }
|
||||
ul.tabs-content > li { display:none; }
|
||||
ul.tabs-content > li.active { display: block; }
|
||||
|
||||
/* Clearfixing tabs for beautiful stacking */
|
||||
|
Loading…
Reference in New Issue
Block a user