Step by Step procedure for creating tab wise design to display content for different portion of web page by http://www.webdesignchicago.com

1. Creating Linkable Tabs with CSS3 http://www.spinxwebdesignchicago.com PHONE: 818 660 1980 TOLL FREE: 888.593.2337 http://www.spinxwebdesignchicago.com

2. I find it's a common desire with "tab" design patterns that there is a way to link to specific tabs. As in, you could give someone a URL and that URL would lead them to that page with the specific desired tab active and displaying the correct content. If each tab is a completely different URL, it's easy. In the HTML that is served, the appropriate class name is applied to the tab to make it look active, and the appropriate content below is served. http://www.spinxwebdesignchicago.com

3. If these tabs are "same page" tabs that hide/show different panels of content instantly (or via Ajax), it's a bit harder. A common (and I'd argue semantic) approach to this has been with hash links, e.g.: http://example.com/#tab-three http://www.spinxwebdesignchicago.com

4. http://www.spinxwebdesignchicago.com

5. With CSS3's :target pseudo class selector, there are ways to make functional tabbed areas with CSS alone (no JavaScript). However, if pure CSS tabs are the goal, # is better. As much as I've experimented with CSS techniques, I think functional tabbed areas are best accommodated by JavaScript. This is functionality territory, and if we adhere to the traditional model of separation of concerns, it should be handled by JavaScript. http://www.spinxwebdesignchicago.com

6. Hash links have a few other problems: When the page loads with a hash link or the hash links changes, the browser will scroll down so that the element with the ID of that hash is at the top of the page. There is a good chance this is not desirable. The latter is easy to fight with preventDefault(). The former is nearly impossible to deal with cleanly. Changing the hash tag of a page adds an entry to the browser history, so pressing the back button will go back through previous hashes. There is also a good chance this is not desirable. http://www.spinxwebdesignchicago.com

7. Let's solve both problems while accommodating the desire to have a way to link to a specific tab. This is what we are going to do: Not use hash links but use URL parameters instead (no jump downs). Use the ultra-hip history.replaceState() so we can change the URL without affecting the back button. http://www.spinxwebdesignchicago.com

8. Our URL's will be like http://example.com/?tab=tab-three Rather than re-write JavaScript based tabs from scratch.We need to adjust very little of the plug-in to make this work. We'll add a param parameter so people can choose whatever they want there. http://www.spinxwebdesignchicago.com

9. Change window location to add URL paramsif (window.history && history.pushState) { // NOTE: doesn't take into account existing params history.replaceState("", "", "?" + base.options.param + "=" + listID);} http://www.spinxwebdesignchicago.com

10. The tricky part is that we need to pull in the URL parameter when the page loads and do JavaScript stuff with it. That means we'll need to use a server-side language, and intermingle some of it with our JavaScript. Here I'll use PHP: Update: We can access the query string entirely through JavaScript, and parse out the parts easily. So instead of the PHP that used to be here (not ideal for many reasons) we'll do this instead: http://www.spinxwebdesignchicago.com

11. if (queryString[base.options.param]) { var tab = $("a[href='#" + queryString[base.options.param] + "']"); tab .closest(".nav") .find("a") .removeClass("current") .end() .next(".list-wrap") .find("ul") .hide(); tab.addClass("current"); $("#" + queryString[base.options.param]).show(); } http://www.spinxwebdesignchicago.com

12. Previous code grabs that URL param and make sure the current tab is highlighted and the correct content is shown. http://www.spinxwebdesignchicago.com

13. http://www.spinxwebdesignchicago.comPHONE: 818 660 1980TOLL FREE: 888.593.2337 http://www.spinxwebdesignchicago.com