vertical-tab
vertical tab componentapproach 1
implement with li and div,
set li width 61px,and float left
set div margin-left 61px,
it's work in FF & chrome, but not work in IE6
<html><head><title>tab demo</title><style>.ul {padding: 0; margin: 0; float: left; z-index: 2;}.ul li {margin: 0; padding: 0; border: 1px solid #777; border-bottom: 0; list-style: inside none; width: 60px; cursor: pointer;}.ul li.bottom {border: 0; border-top: 1px solid #777; width: 61px; cursor: auto;}.ul li.active {background-color: lightgray; border-right: 1px solid lightgrey; }.ul li.hover {background-color: darkgray;}.content {border: 1px solid #777; margin-left: 61px; width: auto; height: 100%; padding: 5px; background-color: lightgray;}</style><script>var currentItem=0;function outStyle(){if(this.className=="bottom")return;else if(this.value!=currentItem)this.className="";elsethis.className="active";}function hoverStyle(){if(this.className=="bottom")return;this.className="hover";}function clickStyle(){this.parentNode.childNodes.className="";this.className="active";currentItem=this.value;}function init(){var ul=document.getElementsByTagName("ul");var len=ul.childNodes.length;for(var i=0;i<len-2;i++){var e=ul.childNodes;if("li"!=e.nodeName.toLowerCase())continue;e.value=i;e.onclick=clickStyle;e.onmouseover=hoverStyle;e.onmouseout=outStyle;//decide first li, and set to currentItemif(e.className=="active")currentItem=e.value;}}window.onload=init;</script></head><body><div style="border: 0px solid blue; padding: 5px; margin: 5px; width: 50%; height: 50%;"><ul class="ul"><li class="active">a</li><li>b</li><li>c</li><li>d</li><li>e</li><li class="bottom">&nbsp;</li></ul><div class="content"><div style="border: 1px solid #cdabde; height: 100%; width: 100%; background-color: white">abc</div></div></div></body></html>
result:
http://dl.iteye.com/upload/attachment/548775/b4c69499-4701-330e-a0e7-cced035e820b.jpg
approach2
implement with table
list tag as first td, and combine all second td as container
it work in IE6, FF, but the border-right of 1st td can't be invisible in chrome.
I believe it's bug of chrome.
hi, it's the reason why FF became the best favor choice in front designer
<html><head><title>tab demo</title><style>#t {border-collapse: collapse;margin: 0;padding: 0;width: 300px;height: 70%;}#t td{margin: 0;padding: 0px;}#t td.left {width: 80px;height: 22px;padding: 0;margin: 0;border: 1px solid #777;cursor: pointer;}#t td.left_bottom {width: 80px;border-right: 1px solid #777;}#t td.left_hover {width: 80px;height: 22px;border: 1px solid #777;border-right: 0;background-color: darkgray;}#t td.left_active {width: 80px;height: 22px;border: 1px solid #777;border-right: 0;background-color: aqua;}#t td.content {border: 1px solid #777;border-left: 0;padding: 3px;background-color: aqua;}#t td.content div {height: 100%;border: 0px solid #777;margin: 0;padding: 0;}</style><script>var currentTD=0;function clickStyle(){var tr=this.parentNode;var t=tr.parentNode;t.rows.cells.className="left";this.className="left_active";currentTD=tr.rowIndex;}function outStyle(){if(this.className=="bottom")return;else if(this.parentNode.rowIndex!=currentTD)this.className="left";elsethis.className="left_active";}function hoverStyle(){if(this.className=="left_bottom")return;this.className="left_hover";}function init(){var t=document.getElementById("t");var len=t.rows.length;for(var i=0;i<len-1;i++){t.rows.cells.className="left";t.rows.cells.onclick=clickStyle;t.rows.cells.onmouseover=hoverStyle;t.rows.cells.onmouseout=outStyle;}t.rows.cells.className="left_active";}window.onload=init;</script></head><body><table id="t"><tr><td><a href="#" >demo</a></td><td rowspan="6" class="content"><div style="border: 1px solid #ccc; width: 100%; height: 100%; overflow: auto; text-align: center; background-color: white;"><iframe id="if" name="if" frameborder="0" height="98%" width="98%"></iframe></div></td></tr><tr><td><a href="#" >demo2</a></td></tr><tr><td>3</td></tr><tr><td>4</td></tr><tr><td>5</td></tr><tr><td class="left_bottom">&nbsp;</td></tr></table></body></html>
result
http://dl.iteye.com/upload/attachment/548151/2f5dce95-69e3-3c8c-b452-10c2abe14ed3.jpg
页:
[1]