利用JavaScript制作网页中“选项卡”效果。

“选项卡”是Windows中的一项非常常用技术应用，但随着Web技术的发展，一些网页中也开始有了类似的技术应用，比如你看到的一些搜索型的门户站点等，都会有这样的应用，在网页中使用这项技术，可以节省很多页面中的空间，而更主要的是能够使网页更加新颖、美观。

　　　您可以在互联网上搜索一下要达到此效果的代码，会有很多，但是你会发现，好像实现起来很复杂，代码量很大。其实，这主要是由于，在过去，Web标准不是很统一，各浏览器厂商也没有相对固定统一的标准。换句话说，代码量大，绝大部分都是一些浏览器版本的判断代码，而真正要实现此效果的代码却没有几行。

< html >
< head >
< title > block show sample </ title >
< style  type ="text/css" >
<!--
  #t1{}{
    width: 40%;
    height: 40%;
    background-color:#d2ddd2;
}
  #t2{}{
    width: 40%;
    height: 40%;
    background-color:#ddd2d2;
    display: none;
}
-->
</ style >
< script  language =javascript >
<!--
  function show(objID)
  {
    var obj = document.all ? document.all[objID] : document.getElementById(objID);
    obj.style.display = 'block';
  }

  function hide(objID)
  {
    var obj = document.all ? document.all[objID] : document.getElementById(objID);
    obj.style.display = 'none';
  }
//-->
</ script >
</ head >
< body >
< p >
&nbsp;&nbsp;   < a  href ="#"  onclick ="Javacript: show('t1'); hide('t2')" > table 1 </ a >
&nbsp;&nbsp;   < a  href ="#"  onclick ="Javacript: show('t2'); hide('t1')" > table 2 </ a >
</ p >
< table  id =t1  border =1  >
   < tr >
     < td > table 1 </ td >
   </ tr >
</ table >
< table  id =t2  border =1 >
   < tr >
     < td > table 2 </ td >
   </ tr >
</ table >
</ body >
</ html >

　其实，说到最后，实现此效果的代码只有那两个function而已。
　　　简单吧，赶快加到你自己的网页中去吧！

转载于:https://www.cnblogs.com/publicbill/archive/2005/12/14/296765.html