资料分享

tab导航菜单(从网上转过来的)

作者:admin 日期:2008-09-05

字体大小: 小中大

最近研究这个效果从网上找了几个放到这里来用的时候改改

<script language="javascript">
function secBoard(n)
{
     var hs=document.getElementsByName("con");//内容的li的id
     var hi=document.getElementsByName("menu");//菜单的td
     var i;
     for( i = 0; i < hs.length; i++ )
     {
         //hi=document.getElementsByName(String("menu"+i));
         if ( i != n )
         {
             try
             {
                 hs[ i ].style.cssText = "display: none;";
                 hi[ i ].style.cssText = 'background-image: url(images/tab_off.gif)';
             }
             catch(e)
             {
                 hs[ i ].setAttribute("style", "display: none;");
                 hi[ i ].setAttribute("style", "background-image: url(images/tab_off.gif)");
             }
         }
         else
         {
             try
             {
                 hs[ n ].style.cssText = "display: block;";
                 hi[ i ].style.cssText = 'background-image: url(images/tab_on.gif)';
             }
             catch(e)
             {
                 hs[ i ].setAttribute("style", "display: block;");
                 hi[ i ].setAttribute("style", "background-image: url(images/tab_on.gif)");
             }
         }
     }
}
</script>

菜单代码：

<table border="0" cellspacing="0" cellpadding="0">
     <tr>
         <td name="menu" id="menu" align="center" width="98" height="28" value="1" class="menu"
         onmouseover="secBoard(0)"
         background="images/tab_on.gif">简介
         </td>
         <td name="menu" id="menu" align="center" width="98" height="28" value="1" class="menu"
         onmouseover="secBoard(1)"
         background="images/tab_off.gif">特点
         </td>
         <td name="menu" id="menu" align="center" width="98" height="28" value="1" class="menu"
         onmouseover="secBoard(2)"
         background="images/tab_off.gif">试用
         </td>
         <td name="menu" id="menu" align="center" width="98" height="28" value="1" class="menu"
         onmouseover="secBoard(3)"
         background="images/tab_off.gif">案例
         </td>
     </tr>
</table>

内容代码：
<div class="content" id="con" name="con" style="display:block">a</div>
<div class="content" id="con" name="con" style="display:none">b</div>
<div class="content" id="con" name="con" style="display:none">c</div>
<div class="content" id="con" name="con" style="display:none">d</div>