B2B網站的滑動門，可以定義某個TAB是否滑動切換

2024-09-05 12:20:01

字體：大中小

來源：轉載

供稿：網友

B2B網站的滑動門，可以定義某一個TAB是否滑動切換，有時候我們需要讓某一個滑動門的菜單不滑動，有其它用途，你可以參考一下本代碼，本代碼原型是從一個B2B網站上扒下來的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>滑動門</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><STYLE type=text/css>TD {	FONT-SIZE: 14px; COLOR: #000; FONT-FAMILY: 宋體}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   class="70qarhlowxag"   id=search>        <div   class="70qarhlowxag"   id=newsearch>        <div   class="70qarhlowxag"   id=newsearchtop>        <UL><LI><div   id="70qarhlowxag"   class=newsearchinsider id=v1 onClick="javascript:doClick(this)">供應信息</DIV></LI><LI><div   id="70qarhlowxag"   class=newsearchinsidew id=v2 onClick="javascript:doClick(this)">求購信息</DIV></LI><LI><div   id="70qarhlowxag"   class=newsearchinsidew id=v3 onMouseOver="javascript:doClick(this)">產品目錄</DIV></LI><LI><div   id="70qarhlowxag"   class=newsearchinsidew id=v4 onMouseOver="javascript:doClick(this)">公司庫</DIV></LI><LI><div   id="70qarhlowxag"   class=newsearchinsidew id=v5 onMouseOver="javascript:doClick(this)">商業資訊</DIV></LI><LI><div   id="70qarhlowxag"   class=newsearchinsidew id=v6 onMouseOver="javascript:doClick(this)">商人社區</DIV></LI><LI><div   id="70qarhlowxag"   class=newsearchinsidew id=v7 onMouseOver="javascript:doClick(this)">拍賣信息</DIV></LI>	</UL></DIV>        <div   class="70qarhlowxag"   id=newsearchbottom>        <div   class="70qarhlowxag"   id=e1><div   class="70qarhlowxag"   id=left><div   class="70qarhlowxag"   id=searchleft1>搜索 供應信息</DIV></DIV></DIV>        <div   class="70qarhlowxag"   id=e2><div   class="70qarhlowxag"   id=left><div   class="70qarhlowxag"   id=searchleft1>請輸入產品名關鍵字</DIV></DIV></DIV>        <div   class="70qarhlowxag"   id=e3><div   class="70qarhlowxag"   id=left><div   class="70qarhlowxag"   id=searchleft1>請輸入產品名關鍵字</DIV></DIV></DIV>        <div   class="70qarhlowxag"   id=e4><div   class="70qarhlowxag"   id=left><div   class="70qarhlowxag"   id=searchleft1>請輸入產品名或公司名關鍵字</DIV></DIV></DIV>        <div   class="70qarhlowxag"   id=e5><div   class="70qarhlowxag"   id=left><div   class="70qarhlowxag"   id=searchleft1>請輸入關鍵字</DIV></DIV></DIV>        <div   class="70qarhlowxag"   id=e6><div   class="70qarhlowxag"   id=left><div   class="70qarhlowxag"   id=searchleft1>請輸入關鍵字</DIV></DIV></DIV>        <div   class="70qarhlowxag"   id=e7><div   class="70qarhlowxag"   id=left><div   class="70qarhlowxag"   id=searchleft1>請輸入拍賣關鍵字</DIV></DIV></DIV></DIV></DIV>      </DIV><DIV></DIV>   </BODY></HTML>

上一篇：很不錯的陰影菜單，仿XP經典風格

下一篇：CSS+Js圓角的滑動門