<style type="text/css"> #tabs{margin-top:25px;} #tabs ul{list-style:none;margin:0;padding:0;height:28px;} #tabs li{float:left;margin:0 5px 0 0;padding:0 0 0 2px;} #tabs li,#tabs li a{height:28px;background:url(/UploadFiles/2010/3/201003122321563280.gif) no-repeat 0 -105px;} #tabs li a{display:block;height:100%;padding:0 16px 0 14px;line-height:28px;text-align:center;background-position:100% -70px;font-weight:bold;color:#464646;text-decoration:none;cursor:pointer;} #tabs li a:hover{text-decoration:underline;} #tabs li.current{height:29px;margin-bottom:-1px;background-position:0 -35px;position:relative;z-index:100;} #tabs li.current a{background-position:100% 0;color:#FFF!important;text-decoration:none;} #tabs .tab-border{background:#FF8516;border:1px solid #CB6419;height:2px;overflow:hidden;} * html #tabs{overflow:hidden;} * html #tabs li a{width:1%;white-space:nowrap;} .bo{width:700px; height:300px; border:1px solid #FF8000; border-top:0;} </style> <div id="tabs"> <ul> <li class="tabbed-pane-tab current"><a>Product Details</a></li> <li class="tabbed-pane-tab"><a>Shipping</a></li> <li class="tabbed-pane-tab"><a>Payment Terms</a></li> <li class="tabbed-pane-tab"><a>Feedback</a></li> </ul> <div class="tab-border"></div> </div> <div id="tables"> <div class="bo" style="display:block">Description</div> <div class="bo" style="display:none">Shipping Packaging</div> <div class="bo" style="display:none">Payment Terms</div> <div class="bo" style="display:none">Feedback</div> </div> <script type="text/javascript"> var tab = document.getElementById('tabs').getElementsByTagName('li'); var kbs = document.getElementById('tables').getElementsByTagName('div'); function put_css(){ for(var i=0; i<tab.length; i++){ tab[i].currentI = i; kbs[i].style.display = i == 0 ? "block" : "none"; tab[i].onclick = function(){ //alert(this.currentI); //alert(i); for(var j=0; j<kbs.length; j++){ kbs[j].style.display = "none"; if(j == this.currentI){ kbs[this.currentI].style.display = "block"; } tab[j].className = 'goodsDetailTab'; } tab[this.currentI].className = 'tabbed-pane-tab current'; } } } put_css(); </script>
