* { margin:0; padding:0; } ul { list-style:none; } .wrapper { width:500px; height:475px; margin-top:20px; } .tab { border:1px solid #ddd; border-bottom:0; height:36px; width:320px; } .tab li { position:relative; float:left; width:80px; height:34px; line-height:34px; text-align:center; cursor:pointer; border-top:4px solid #fff; } .tab span { position:absolute; right:0; top:10px; background:#ddd; width:1px; height:14px; overflow:hidden; } .products { width:500; border:1px solid #ddd; height:476px; } .products .main { float:left; display:none; } .products .main.selected { display:block; } .tab li.active { border-color:red; border-bottom:0; }
使用几行jquery代码就可以实现网页的table栏切换,这里的图片尺寸不够,所以只能这样显示,下载代码后可以根据自己的需求修改尺寸