当前位置:网站首页 - 特效代码 - 文本文字
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>标签在底部的简洁CSS选项卡</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{padding:50px;margin:0;color:#666;font:12px arial,sans-serif;} .tabT{width:400px;padding:0;margin:0;background:#ddd url(http://www.codefans.net/jscss/demoimg/200903/dot.jpg) repeat-x top;} .tab,.tab li{padding:0;margin:0;border:none} .tab{height:23px;display:block;width:400px;} .tab li{display:block;float:left;height:18px;line-height:18px;padding:2px 20px;text-align:center;cursor:pointer;} .tab li.current {display:block;color:red;background-color:#fff;border-right:1px solid red;border-left:1px solid red;border-bottom:1px solid red;padding:2px 20px;} .show,hidden{width:398px;height:100px;margin:0;border-right:1px solid red;border-bottom:0px solid red;border-left:1px solid red;border-top:1px solid red;text-align:left;} .hidden{display:none;} .show{display:block;} .con{padding:10px;} </style> <script type="text/javascript" language="javascript"> <!-- function tab(tabId, tabC){ var len =document.getElementById('getId').getElementsByTagName('li').length; for(i=1; i <= len; i++){ if ("tabId"+i==tabId){ document.getElementById(tabId).className="current"; }else{ document.getElementById("tabId"+i).className=""; } if ("tabC"+i==tabC){ document.getElementById(tabC).className="show"; }else{ document.getElementById("tabC"+i).className="hidden"; } } } //--> </script> </head> <body> <div id="getId"> <div class="show" id="tabC1"><div class="con">欧莱凯主题网,南昌网络公司,希望你喜欢。</div> </div> <div class="hidden" id="tabC2"><div class="con">ASP</div> </div> <div class="hidden" id="tabC3"><div class="con">JQUERY</div> </div> <div class="hidden" id="tabC4"><div class="con">AJAX</div> </div> <div class="tabT"> <ul class="tab"> <li id="tabId1" class="current" onclick="tab('tabId1','tabC1');">酷站欣赏</li> <li id="tabId2" onclick="tab('tabId2','tabC2');">图库素材</li> <li id="tabId3" onclick="tab('tabId3','tabC3');">特效代码</li> <li id="tabId4" onclick="tab('tabId4','tabC4');">网站建设</li> </ul> </div> </div> </body> </html>