Tab切换效果

August 11th 2008,02:19 PM 学习工作 , 2 comments

简单的切换效果
js中主要控制两部分
一:各个切换项的内容框
二:切换小导航的样式变化

 function $(id)
 {
  return document.getElementById(id);
 }
 function setTab(con)
 {
   var links = $('list').getElementsByTagName('A');<!--控制切换时的样式变化-->
   var myTab = $('con_'+con);
   for(var i=1;i<=4; i++)
   {
    if(i==con)
      {
	links[i-1].className='on';
	myTab.style.display='block';
      }
   else
     {
        $('con_'+i).style.display='none';
	links[i-1].className='off';
     }  
 }
}
<!--数组从0开始,所以此时links后的参数为i-1。但如果i从0开始,links后的参数为i即可-->

效果如下

Run This Code

2 Responses

  1. Freddy, August 12 2008 , 21:25 ,#1
    哈哈,不错不错,Tab标签的
    href="#"
    写成
    href="javascript:void(0)"
    比较好,不会引起页面上跳tongue
  2. Apple, August 13 2008 , 09:12 ,#2
    (*^__^*) 嘻嘻……,令我头大的js,要从最基础最常用的学起
    多谢赐教~~~~lol

Write a comment:



 



[b][/b] - [i][/i] - [u][/u]- [quote][/quote]

:-/ :d :o :p :( :han: :cry: :zzz: o_o