[导读]好长时间都没有更新网站了，一是忙，二是服务器不稳定，导致没有心情开站了，今天就一个简单tab选项卡效果发送给大家，当然这是针对莱鸟的教程，不需要懂他的代码，傻瓜式的

好长时间都没有更新网站了，一是忙，二是服务器不稳定，导致没有心情开站了，今天就一个简单tab选项卡效果发送给大家，当然这是针对莱鸟的教程，不需要懂他的代码，傻瓜式的操作就可以了。
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="content_table3">
  <tr>
    <td>

<div class="spacing"></div>
<script>
function pj_tab(o,s1,s2,n){
 var arr1 = document.getElementById(s1).getElementsByTagName("a");
 for(i=0;i<arr1.length;i++){
  arr1[i].className = "";
 }
 o.className = "anow";
 for(ii=0;ii<n+1;ii++){
  document.getElementById(s2.split("_")[0]+"_"+ii).style.display = "none";
 }
 document.getElementById(s2).style.display = "block";
}
</script>
<div class="spacing20"></div>
<div class="view_taball" id="aBox1">
<a href="#" class="anow" onmouseover="pj_tab(this,'aBox1','toBox_0',7)" id="pj_tab_1">特色推荐</a>
<a href="#" onmouseover="pj_tab(this,'aBox1','toBox_1',9)">线路一览</a>
<a href="#" onmouseover="pj_tab(this,'aBox1','toBox_2',9)">行程路线</a>
<a href="#" onmouseover="pj_tab(this,'aBox1','toBox_3',9)">费用包含</a>
<a href="#" onmouseover="pj_tab(this,'aBox1','toBox_4',9)">费用不包含</a>
<a href="#" onmouseover="pj_tab(this,'aBox1','toBox_5',9)">自费项目</a>
<a href="#" onmouseover="pj_tab(this,'aBox1','toBox_6',9)">预定须知</a>
<a href="#" onmouseover="pj_tab(this,'aBox1','toBox_7',9)">温馨提示</a>
<a href="#" onmouseover="pj_tab(this,'aBox1','toBox_8',9)">预定提示</a>
<a href="#" onmouseover="pj_tab(this,'aBox1','toBox_9',9)">签约付款</a>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="jpxc_tables1" id="toBox_0">
<tr>
<td>
<div class="spacing20"></div>
<div class="spacing20"></div>
</td>
</tr>
特色推荐
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="itemv6" id="toBox_1">
  <tr>
    <td class="tdtop"><p class="title"></p></td>
  </tr>
  <tr>
    <td class="tdcenter">
线路一览
 </td>
  </tr>
  <tr>
    <td class="tdfoot">&nbsp;</td>
  </tr>
</table>
<div class="spacing5"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="jpxc_tables1" id="toBox_2">
<tr>
<td>
<div class="spacing20"></div>
<div class="spacing20"></div>
</td>
</tr>
行程路线
</table>

<div class="spacing5"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="itemv6" id="toBox_3">
  <tr>
    <td class="tdtop"><p class="title"></p></td>
  </tr>
  <tr>
    <td class="tdcenter">
费用包含
 </td>
  </tr>
  <tr>
    <td class="tdfoot">&nbsp;</td>
  </tr>
</table>
<div class="spacing5"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="itemv6" id="toBox_4">
  <tr>
    <td class="tdtop"><p class="title"></p></td>
  </tr>
  <tr>
    <td class="tdcenter">
费用不包含
  </tr>
  <tr>
    <td class="tdfoot">&nbsp;</td>
  </tr>
</table>
<div class="spacing5"></div>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="itemv6" id="toBox_5">
  <tr>
    <td class="tdtop"><p class="title"></p></td>
  </tr>
  <tr> <td class="tdcenter">
自费项目
 </td>
  </tr>
  <tr>
    <td class="tdfoot">&nbsp;</td>
  </tr>
</table>
<div class="spacing5"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="itemv6" id="toBox_6">
  <tr>
    <td class="tdtop"><p class="title"></p></td>
  </tr>
  <tr> <td class="tdcenter">
预定须知
 </td>
  </tr>
  <tr>
    <td class="tdfoot">&nbsp;</td>
  </tr>
</table>
<div class="spacing5"></div>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="itemv6" id="toBox_7">
  <tr>
    <td class="tdtop"><p class="title"></p></td>
  </tr>
  <tr> <td class="tdcenter">
温馨提示
 </td>
  </tr>
  <tr>
    <td class="tdfoot">&nbsp;</td>
  </tr>
</table>
<div class="spacing5"></div>

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="itemv6" id="toBox_8">
  <tr>
    <td class="tdtop"><p class="title"></p></td>
  </tr>
  <tr> <td class="tdcenter">
预定提示
 </td>
  </tr>
  <tr>
    <td class="tdfoot">&nbsp;</td>
  </tr>
</table>
<div class="spacing5"></div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="itemv6" id="toBox_9">
  <tr>
    <td class="tdtop"><p class="title"></p></td>
  </tr>
  <tr> <td class="tdcenter">
签约付款
 </td>
  </tr>
  <tr>
    <td class="tdfoot">&nbsp;</td>
  </tr>
</table>
<div class="spacing5"></div>

 </td>
  </tr>
</table>

 </td> 

  </tr>
</table>
<script>
pj_tab(document.getElementById("pj_tab_1"),'aBox1','toBox_0',9)
</script>

上面的普通的鼠标滑过效果，当然里面的CSS可以根据自己的站的风格，或者拷贝一个你喜欢的CSS效果，如果想实现点击，很简单，把里面的onmouseover改为onclick即可，上面的超连接的地址href="#" ，这样页面长了会导致返回到本页的头部，使浏览着感到反感，只要将连接地址改为href="javascript:;" 即可。

Tags: