上海益国网络科技有限公司
上海专业网站建设一条龙服务

学无止境!

这里摘有最贴近网站程序使用的方方面面相关技术文档~

021-20906540
AM 9:30-12:00 PM:2:00-5:30
您当前位置:首页 >> 技术支持 >>  技术专辑 >>  滑动门-TAB切换

兼容性最好的滑动门

<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>



HTML主体部分代码:

<!-- 标题开始 -->

   <div class="TabTitle">

     <ul id="myTab0">

       <li class="active" onclick="nTabs(this,0);">1111111111</li>

       <li class="normal" onclick="nTabs(this,1);">22222222222</li>

     </ul>

   </div>

   

   

   

   <!-- 内容开始 -->

   <div class="TabContent" >

     <div id="myTab0_Content0">11111111111</div>

     <div id="myTab0_Content1" class="none">22222222222</div>

   </div>



以上效果是实现鼠标点击标题切换对应的内容块。若需要实现鼠标滑动过即时切换,需要将

onclick

改为

onmouseover


做网站找动人网络!建站一条龙服务找动人网络!站长学习尽在站长培训网
  • 拉风琴式的JS滑动门
    TOP