Tabs on a mobile site - Javascript turned off, what to do??

Question

I have a site that will be used mostly on mobile devices, the top nav are tabs but right now they are hard coded instead of using Javascript. We are taking into consideration all mobile devices that will not have javascript.

So, is there a way to gracefully degrade javascript Tab functionality to then to to the right html page?

Answer 1

Yes, stack their content panels, and give them an id attribute. Then link the tabs to them.

<a href="#tab1">Tab 1</a>

<div id="tab1">
Hi, I'm tab 1!
</div>

Answer 2

You could simply have the html of the tabs contain links to the different pages for those tabs, then within the javascript, you target those links and change them into events to tab using javascript.

Answer 3

Personally I think the way you should be thinking of it is not as degrading javascript functionality but enhancing standard HTML. I'm not sure how your tabs work but in general an implementation of tabs could work fine with standard anchor tags pointing to different pages, one for each tab. I was about to describe how this could then be enhanced with JS but it should work perfectly fine without needing any javascript as far as I can see. I'm wondering if this is what you mean you are doing currently when you say they are "hardcoded" isntead of using "javascript". What do you want to gain from the JS anyway?

In general though if you want to support non-JS users the best bet is to work out how to do a non-JS site and then work out what you can do to make it better for JS users (eg introducing ajax, etc.)

Edit to add: it occurs to me that this is a solution for when your tabs are the top nava and thus they are changing the entire page content. If you have tabs in a smaller part of the page then this wouldn't be an optimal solution.

Answer 4

If I am understanding this correctly, we have had a similar issue that I had to solve.

We use the Milonic Menu js dynamic menu creator. Problem is, all of the menus are completely rendered using js.

My solution was to create a set of tabs that are identical to the ones that would have been rendered if the Milonic Menu were to have created them. Then, on page load, I remove them from the page using js.

We use prototype, so I simply use the:

document.observe( "dom:loaded", function(){ ...remove elements... } );

Now, when javascript is disabled, you still get the pretty tabs or menu that would have been created by the js.