[WEB前端]JS+CSS经典实用的滑动门切换效果 - 技术文档

特效预览：

CSS代码：

			<style type="text/css">

* { margin:0; padding:0; }body { margin:50px; font-size:12px; color:#666; }li { list-style:none;}

#tab1, #tab2 { width:397px; height:34px; border:1px #cfedff solid; border-bottom:0; }

#tab1 li, #tab2 li { float:left; padding:0 31px; height:34px; line-height:34px; background:#85bcd9; text-align:center; border-right:1px #ebf7ff solid;border-bottom:1px #ebf7ff solid; cursor:pointer; }

#tab1 li.now, #tab2 li.now { color:#5299c4; background:#fff; font-weight:bold; border-bottom:0;}

.tablist { width:377px; height:100px; padding:10px; font-size:14px; line-height:24px; border:1px #cfedff solid; border-top:0; display:none; }

.block { display:block; }

</style>

JS代码：

			
							<script type="text/javascript"> 

function setTab(m,n){ 

var menu=document.getElementById("tab"+m).getElementsByTagName("li"); 

var div=document.getElementById("tablist"+m).getElementsByTagName("div"); 

var showdiv=[]; 

for (i=0; j=div[i]; i++){ 

if ((" "+div[i].className+" ").indexOf(" tablist ")!=-1){ 

showdiv.push(div[i]); 

} } 

for(i=0;i<menu.length;i++) { 

menu[i].className=i==n?"now":""; 

showdiv[i].style.display=i==n?"block":"none"; 

} } 

</script>

HTML代码：

			<div id="tab1">

  <ul>

    <li onmouseover="setTab(1,0)" class="now">第一行</li>

    <li onmouseover="setTab(1,1)">第二行</li>

    <li onmouseover="setTab(1,2)">第三行</li>

    <li onmouseover="setTab(1,3)">第四行</li>

  </ul>

</div>

<div id="tablist1">

  <div class="tablist block"><p>第一行信息第一行信息第一行信息第一行信息第一行信息第一行信息第一行信息第一行信息第一行信息第一行信息</p></div>

  <div class="tablist"> <p>第二行内容第二行内容第二行内容第二行内容第二行内容第二行内容第二行内容第二行内容第二行内容第二行内容</p> </div>

  <div class="tablist"> <p>第三行东西第三行东西第三行东西第三行东西第三行东西</p> </div>

  <div class="tablist"> <p>第四行效果第四行效果第四行效果第四行效果</p> </div>

</div>

<br />

<br />

<br />

<div id="tab2">

  <ul>

    <li onclick="setTab(2,0)" class="now">第一行</li>

    <li onclick="setTab(2,1)">第二行</li>

    <li onclick="setTab(2,2)">第三行</li>

     <li onclick="setTab(2,3)">第四行</li>

  </ul>

</div>

<div id="tablist2">

  <div class="tablist block"> 第一行信息第一行信息第一行信息第一行信息第一行信息第一行信息第一行信息第一行信息第一行信息第一行信息 </div>

  <div class="tablist"> <p>第二行内容第二行内容第二行内容第二行内容第二行内容第二行内容第二行内容第二行内容第二行内容第二行内容</p> </div>

  <div class="tablist"> <p>第四行效果第四行效果第四行效果第四行效果</p> </div>

   <div class="tablist"> <p>第四行效果第四行效果第四行效果第四行效果</p> </div>
		
			</div>