Standard, semantic, unobtrusive page-check switching

Standard The popularity of the page sign
Since the introduction of the Yahoo! Home page sign (tab, see below), this is an excellent way to become more and more popular, users are gradually accustomed to and like it, because it can be in the original space to add more information available, and just switch, do not need to refresh the entire page, browsing more comfortable. Many websites accept and use, such as Sina.


tag structure of a page check
So, let's take a look at the code after these pages are signed.

Sina completely does not consider any standard, is the table nesting, we skip to mention. The XHTML form of Yahoo! is this:
<div>
<ul>
<li> Page Sign 1</li>
<li> Page Sign 2</li>
...
</ul>
</div>
<div>
<div> content 1</div><!--They may be loaded by Ajax-->
<div> content 1</div>
...
</div>

Conform to the standard, but without semantics. There is no association between the page check and the corresponding content. In other words, in the absence of CSS display, the user does not know what the page sign corresponds to which piece of content. And for JavaScript implementations, you have to define more IDs or classes as call hooks for the elements, which can easily cause code redundancy. This was improved by using the hash of the connection element (the field after the # number) to correlate with the content, which is the following:
<div>
<ul>
<li><a href= "#content1" > Page sign 1</a></li>
<li><a href= "#content2" > Page sign 2</a></li>
...
</ul>
</div>
<div>
<div id= "Content1" > Content 1</div><!--They may be loaded by Ajax-->
<div id= "Content2" > Content 1</div>
...
</div>

In this way, for the machine, it does find the correlation point, and when the user clicks on it, it can also be transferred to the corresponding content block under the action of the hash (the "anchor point" in the traditional parlance). There is progress, but it is not semantic enough.

semantics, semantics, semantics!
What should be the ideal standard and Semantic tab code? In my opinion, it should be like this:
<dl>
<dt> Page Sign 1</dt>
<dd> content 1</dd>
<dt> Page Sign 2</dd>
<dd> content 2</dd>
</dl>

Of course, I don't think the designer/developer of Yahoo! is not aware of semantics, perhaps because some special requirements may not be implemented under this code, and have to compromise. Yes, in this code form, although semantics can be fully embodied, but to achieve the form of the page sign, it is indeed a difficult problem.

the way to solve it
First, please run our demo and analyze it yourself first. If you use Firefox, you can try to disable CSS styles for "Enjoy" (if you have a Web Developer toolbar, you can ctrl + SHIFT + S). Go on.

resolving DT's horizontal
DT is interleaved with DD, how can I make DT line on one line? Well, theory doesn't analyze too much, and to get them together, we assume that DD doesn't exist. In this case, float can be used to line together. Since DD can't be nonexistent, OK, so let them out of the document stream, how? Position:absolute: It's OK. But IE6 has a problem, WTF. My solution is to use JavaScript to put all the DT together, which seriously hurts semantics, but it's just a browser problem, and it's a semantic problem when there's JavaScript, Amitabha, and Dialectics thinks that things have two sides.

solve DD's self-applicable height
There is no solution to using pure CSS for the DD, both theoretical and practical, that has been position:absolute. Again, I used JavaScript to dynamically compute its height each time and then give the entire DL.

limitations and shortcomings
This guarantees the standard, semantics, and unobtrusive. But for a small number of users who have advanced browsers that can parse CSS, but have shut down JavaScript, it is highly likely that content blocks that cannot be checked by a page that cannot be applied to a higher level block the following information.

S2utab
I'm glad I can write some practical JavaScript, as mentioned above, I'll name it s2utab-to explain, it is standard, semantic, unobtrusive tab abbreviation. First of all, it is very small, does not depend on any library, in ie6+, opera 9+, Firefox all pass the test (if you have safari, be sure to help test, thank you). Second, flexible, in addition to DL without any hooks, and the number of pages signed flexible unlimited. Again, you can specify the form of the event for the tab switch, and you can specify which is the initial page sign.

usage
You can add the following functions for window.onload:
S2utab (page sign, event type, initial page sign);

Where the page check refers to a reference to a DL element, and if you pass in a string, the return ID is a DL reference to the modified string; The event type refers to whether the activation of the page check is clicked or the mouse hovers, incoming click or mouseover (Note: no "on"!) ; Initial tab refers to the page sign that you need to activate when you initialize the page, and note that in order to conform to the programming habits, please count from 0.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "lang=" en "xml:lang=" en "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><meta name=" developer content= "Realazy"/><title> standard, semantic, unobtrusive page-check switching </ Title><style type= "text/css" media= "screen" >* {margin:0; padding:0;} body {width:42em; margin:3em auto; background: #ececec; color: #222; font:1em/1.5 Arial,helvetica,sans-serif;} h1 {margin-bottom:.2em; font-size:2em;} H2 {margin:. 8em 0; font-family:geogia,times,serif; font-size:1.4em;} Pre {margin:1em 0; width:100% overflow-x: auto; *padding-bottom:1em;} code {font-family:monospace; font-size:.99em;}. copyleft {margin:1em 0;} /*tab style */.tab {position:relative; width:20em;}. tab DT {position:relative; z-index:2; bottom:-1px; float:left; margin:0 4px; padding:0 12px; border:1px solid #ccc; Background: #333; Color#fff; Cursor:pointer}. tab. Current {border-bottom:1px solid #fff; Font-weight:bold background: #fff; color: #333;}. tab DD {position:absolute; z-index:1; top:1.6em; left:0; width:18em; padding:1em; border:1px solid #ccc; background: #fff; }</style><script type= "Text/javascript" >var s2utab = function (Tabcontainer, EventType, initial) {if ( typeof Tabcontainer = = ' String ') Tabcontainer = document.getElementById (tabcontainer); eventtype = ' on ' + Eventtype;var DT s = tabcontainer.getelementsbytagname (' dt '); var dds = Tabcontainer.getelementsbytagname (' dd '); var pp = initial; AddClass (dts[pp], ' current '); var dth = Dts[pp].clientheight;var DDH = Dds[pp].clientheight;tabcontainer.style.height = DTH + DDH + ' px '; for (var i = 0; i < dts.length ++i) {if (I!= initial) Dds[i].style.display = ' None ';(function () {var p = I;dts[p][eventtype] = function () {if (P!= pp) {addclass (dts[p], ' current '); Removeclass (dts[pp], ' current ');dd S[p]. style.display = ' block ';dd s[pp].style.display = ' None ';dd h = ddS[p].clientheight;tabcontainer.style.height = dth + DDH + ' px ';} pp = P;return false;}}) ();} if (IELT7) {for (var i = 1; i < dts.length ++i) {Tabcontainer.insertbefore (dts[i], dds[0])}if (dts[initial + 1]) dts[in Itial + 1][eventtype] () Else Dts[initial-1][eventtype] ();d Ts[initial][eventtype] ();} var ielt7 = document.all && navigator.userAgent.indexOf (' Msie 7 ') < 0 &&!window.opera;var hasclass = f Unction (ELE,CLS) {return Ele.className.match (new RegExp (' (\\s|^) ' +cls+ ' (\\s|$) '));} var addclass = function (ele,cls) {if (!this.hasclass (ELE,CLS)) Ele.classname + = "" +CLS;} var removeclass = function (ele,cls) {if (Hasclass (ele,cls)) {var reg = new RegExp (' (\\s|^) ' +cls+ ' (\\s|$) '); ele.classname =ele.classname.replace (Reg, ');}} </script><script type= "Text/javascript" >//<! [cdata[window.onload = function () {S2utab (' tab ', ' click ', 2); S2utab (' tab2 ', ' mouseover ', 0);} ]]></script></pead><body><p> Standard, semantic, unobtrusive tab switching &LT;/H1&GT;&LT;H2> Example 1: Click to activate </p><pre><code>s2utab (' tab ', ' Click ', ' 2 '); &LT;/CODE&GT;&LT;/PRE&GT;&LT;DL id= "tab" class= "tab" ><dt> BA on the autumn habitat </dt><dd><p> BA The original wind and rain set,</p><p> night to see the frequency of geese. </p><p> the leaves of a tree,</p><p> cold lights alone night. </p><p> Empty Garden Dew drops,</p><p> The lone wall of the wild monk neighbour. </p><p> Gate,</p><p> back again to this body. </p></dd><dt> Brides </dt><dd><p> 3rd into the kitchen under,</p><p> wash hands for soup. </p><p> not familiar with the Aunt,</p><p> advance sister-in-law taste. </p></dd><dt> the second </dt><dd><p> ma,</p><p> water wind like knife. </p><p> Ping Sha Day has not,</p><p> see Lintao. </p><p> The Great Wall War,</p><p> the high and salty words. </p><p> Yellow dust Foot This ancient,</p><p> bones disorderly basil. </p></dd></dl><p> Example 2: mouse hover activates </p><pre><code>s2utab (' tab ', ' mouseover ') , 0); </code></pre><dl id= "tab2" class= "tab" ><dt> BA on the autumn home </dt><dd><p> BA The original wind and rain set, </p><p> night to see the flying geese frequency. </p><p> the leaves of a tree,</p><p> cold lights alone night. </p><p> Empty Garden Dew drops,</p><p> The lone wall of the wild monk neighbour. </p><p> Gate,</p><p> back again to this body. </p></dd><dt> Brides </dt><dd><p> 3rd into the kitchen under,</p><p> wash hands for soup. </p><p> not familiar with the Aunt,</p><p> advance sister-in-law taste. </p></dd><dt> the second </dt><dd><p> ma,</p><p> water wind like knife. </p><p> Ping Sha Day has not,</p><p> see Lintao. </p><p> The Great Wall War,</p><p> the high and salty words. </p><p> Yellow dust Foot This ancient,</p><p> bones disorderly basil. </p></dd></dl><p>css</p><pre><code>.tab {position:relative; width : 20em;}. tab DT {position:relative; z-index:2; bottom:-1px; float:left; margin:0 4px; padding:0 12px; border:1px solid #ccc; Background: #333; Color: #fff; Cursor:pointer}. tab. Current {border-bottom:1px solid #fff; Font-weight:bold background: #fff; color: #333;}. tab DD {position:absolute; z-index:1; top:1.6em; left:0; width:18em; padding:1em; border:1px Solid #ccc; Background: #fff;} </code></pre></body></ptml>

[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]