一個網頁同時出現選項卡和滑動門的代碼

2024-09-05 12:20:18

字體：大中小

來源：轉載

供稿：網友

簡潔TAB效果，一個網頁同時出現選項卡和動門的代碼，有一些朋友問到了這個問題，現在這段代碼可以幫你開拓一下思路。顏色搭配是隨便弄的，請自己調整一下。

<head><title>簡潔TAB</title><script type="text/javascript">function nTabs(thisObj,Num){if(thisObj.className == "active")return;var tabObj = thisObj.parentNode.id;var tabList = document.getElementById(tabObj).getElementsByTagName("li");for(i=0; i <tabList.length; i++){  if (i == Num)  {   thisObj.className = "active";       document.getElementById(tabObj+"_Content"+i).style.display = "block";  }else{   tabList[i].className = "normal";    document.getElementById(tabObj+"_Content"+i).style.display = "none";  }} }</script><style type="text/css"></style></head><body><div   id="qjmsuth"   class="nTab">		<div   id="vtkxorf"   class="TabTitle">		<ul id="myTab">		<li id="aflgehk"    class="active" onmouseover="nTabs(this,0);">ASP</li>		<li id="aqofhkn"    class="normal" onmouseover="nTabs(this,1);">PHP</li> 			      		</ul>		</div>	    <div   id="eqsnpdv"   class="TabContent">	<div   class="iyeviwv"   id="myTab_Content0">同一頁面，滑動門，選項卡同在</div>	<div   class="aqzqwku"   id="myTab_Content1" class="none">兼容性好</div>	</div>	</div><div   id="smouazj"   class="nTab">		<div   id="kagtznb"   class="TabTitle">		<ul id="myTab1">		<li id="myekmpo"    class="active" onclick="nTabs(this,0);">ASP</li>		<li id="mcizfiw"    class="normal" onclick="nTabs(this,1);">PHP</li> 			      		</ul>		</div>	    <div   id="kegbogj"   class="TabContent">	<div   class="iyerxao"   id="myTab1_Content0">簡潔TAB，滑動門，選項卡</div>	<div   class="tyekqel"   id="myTab1_Content1" class="none">兼容性好</div>			    </div>	</div></body></html>

上一篇：折疊菜單，豎向的

下一篇：DIV學寫帶動畫的CSS+JS下拉導航條

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注