B2B网站上常用的TAB选项卡

2024-09-05 12:19:57

字体：大中小

来源：转载

供稿：网友

一个B2B网站上常用的TAB选项卡菜单，请先运行一下看效果，代码有点复杂，关键是没有优化好，很多地方可以继续优化，特别是CSS代码部分，用的朋友根据你的情况好好精简一下代码，其实菜单还是很不错的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>B2B网站上常用的TAB选项卡</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><STYLE type=text/css>BODY { FONT-SIZE: 14px; COLOR: #000; }TD { FONT-SIZE: 14px; COLOR: #000; }SELECT { FONT-SIZE: 12px}INPUT { FONT-SIZE: 12px}A:link { COLOR: #3d362b}A:visited { COLOR: #3d362b}A:hover { COLOR: #f60}BODY #search { CLEAR: both; WIDTH: 540px; HEIGHT: 50px}BODY #search #left { FLOAT: left}BODY #search #searchleft { PADDING-LEFT: 30px; FLOAT: left; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left}BODY #search #searchleft1 { PADDING-LEFT: 30px; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left}FORM { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px}BODY #newsearch { WIDTH: 540px; HEIGHT: 30px}BODY #newsearchtop { WIDTH: 540px; HEIGHT: 25px; TEXT-ALIGN: right}BODY #newsearchtop LI { FONT-SIZE: 12px; FLOAT: left}.newsearchinsidew { BORDER-TOP: #cccccc 1px solid; MARGIN-TOP: 2px; BORDER-LEFT: #ccc 1px solid; WIDTH: 70px; CURSOR: hand; LINE-HEIGHT: 21px; BORDER-BOTTOM: #cc3300 1px solid; HEIGHT: 23px; TEXT-ALIGN: center; TEXT-DECORATION: underline}.newsearchinsider { BORDER-RIGHT: #cc3300 1px solid; BORDER-TOP: #cc3300 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #cc3300 1px solid; WIDTH: 70px; COLOR: #ffffff; PADDING-TOP: 5px; HEIGHT: 25px; BACKGROUND-COLOR: #ff7300; TEXT-ALIGN: center}.newsearchinsider A:visited { COLOR: #ffffff; TEXT-DECORATION: none}.newsearchinsidew A:hover {background-color:#CCCCCC;WIDTH: 69px; TEXT-ALIGN: center}BODY #newsearchbottom { BORDER-RIGHT: #cc3300 1px solid; BORDER-LEFT: #cc3300 1px solid; BORDER-BOTTOM: #cc3300 1px solid; POSITION: relative; HEIGHT: 50px; BACKGROUND-COLOR: #ff7300}BODY #newsearchbottom #e1 { Z-INDEX: 0; LEFT: 0px; VISIBILITY: visible; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}BODY #newsearchbottom #e2 { Z-INDEX: 0; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}BODY #newsearchbottom #e3 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}BODY #newsearchbottom #e4 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}BODY #newsearchbottom #e5 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}BODY #newsearchbottom #e6 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}BODY #newsearchbottom #e7 { Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}</STYLE><SCRIPT>function doClick(o){  o.className="newsearchinsider";  var j;  var id;  var e;  for(var i=1;i<=7;i++){    id ="v"+i;    j = document.getElementById(id);    e = document.getElementById("e"+i);    if(id != o.id){      j.className="newsearchinsidew";      e.style.visibility = "hidden";    }else{   e.style.visibility = "visible";    }  }   var id = o.id+"";  var dd=id.substring(1,2); var curForm = document.getElementById("FormSearch"+dd); var inputv ; for(var i=1;i<=7;i++){ var otherForm = document.getElementById("FormSearch"+i); } }function doOut(o){ }</SCRIPT></HEAD><BODY><br><br>      <DIV id=search>        <DIV id=newsearch>        <DIV id=newsearchtop>        <UL>   <LI><DIV class=newsearchinsider id=v1 onClick="javascript:doClick(this)">供应信息</DIV></LI>   <LI><DIV class=newsearchinsidew id=v2 onClick="javascript:doClick(this)">求购信息</DIV></LI>   <LI><DIV class=newsearchinsidew id=v3 onMouseOver="javascript:doClick(this)">产品目录</DIV></LI>   <LI><DIV class=newsearchinsidew id=v4 onMouseOver="javascript:doClick(this)">公司库</DIV></LI>   <LI><DIV class=newsearchinsidew id=v5 onMouseOver="javascript:doClick(this)">商业资讯</DIV></LI>   <LI><DIV class=newsearchinsidew id=v6 onMouseOver="javascript:doClick(this)">商人论坛</DIV></LI>   <LI><DIV class=newsearchinsidew id=v7 onMouseOver="javascript:doClick(this)">拍卖信息</DIV></LI>     </UL>  </DIV>          <DIV id=newsearchbottom>        <DIV id=e1><DIV id=left><DIV id=searchleft1>搜索供应信息</DIV></DIV></DIV>        <DIV id=e2><DIV id=left><DIV id=searchleft1>请输入产品名关键字</DIV></DIV></DIV>        <DIV id=e3><DIV id=left><DIV id=searchleft1>请输入产品名关键字</DIV></DIV></DIV>        <DIV id=e4><DIV id=left><DIV id=searchleft1>请输入产品名或公司名关键字</DIV></DIV></DIV>        <DIV id=e5><DIV id=left><DIV id=searchleft1>请输入关键字</DIV></DIV></DIV>        <DIV id=e6><DIV id=left><DIV id=searchleft1>请输入关键字</DIV></DIV></DIV>        <DIV id=e7><DIV id=left><DIV id=searchleft1>请输入拍卖关键字</DIV></DIV></DIV></DIV></DIV>      </DIV><DIV></DIV>   </BODY></HTML>

上一篇：基本的全兼容纯CSS下拉菜单

下一篇：超酷JS+CSS动感鼠标特效菜单，竖向排列