演示地址：http://www.tyou.com.cn/c/bjpx.html
（课程设置部分和滑动效果）
脚本部分---------------------------------------------------------------------------------------------
<!-- 滑动门脚本开始 -->
<style type="text/css">
a.blulink{color:#4484a7;}
a.blulink:visited {color:#4484a7;}
.biaoti {
font-size: 14px;
font-weight: bold;
color: #0F659E;
}
.nTab{
}
.TabTitle{
clear: both;
height: 24px;
overflow: hidden;
background-image: url(/img/bjzx/bjzx_r73_c51.jpg);
}
.TabTitle2{
clear: both;
height: 19px;
overflow: hidden;
}
.TabTitle ul{
border:0;
margin:0;
padding:0;
}
.TabTitle2 ul{
border:0;
margin:0;
padding:0;
}
.TabTitle li{
float: left;
cursor: pointer;
list-style-type: none;
font-size: 12px;
text-align: center;
height: 24px;
margin-top: 0;
margin-right: 4;
margin-bottom: 0;
margin-left: 0;
font-weight: bold;
padding-top: 7px;
}
.TabTitle2 li{
float: left;
cursor: pointer;
list-style-type: none;
font-size: 12px;
text-align: center;
height: 19px;
margin-top: 0;
margin-right: 2px;
margin-bottom: 0;
margin-left: 0;
font-weight: normal;
padding-top: 2px;
}
.TabContent{
width:auto;
background:#fff;
text-align: center;
margin: 0px;
}
.nTab .TabTitle .active{
background-image: url(/img/bjzx/active.gif);
height: 24px;
margin-right: 4px;
color: #F97D27;
}
.TabTitle .normal{
background-image: url(/img/bjzx/normal.gif);
height: 24px;
color: #999999;
margin-right: 4px;
}
.nTab .TabTitle2 .active{
background-image: url(/img/bjzx/active2.gif);
height: 24px;
margin-right: 2px;
color: #FFFFFF;
}
.TabTitle2 .normal{
background-image: url(/img/bjzx/normal2.gif);
height: 24px;
color: #FFFFFF;
margin-right: 2px;
}
.none {display:none;}
</style>
<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>
<!-- 滑动门脚本结束 -->
内容部分---------------------------------------------------------------------------------------------
<div class="nTab" align="center">
<!-- 标题开始 -->
<div class="TabTitle">
<ul id="myTab0">
<li class="active" onmouseover="nTabs(this,0);">
<div style="width:88px">影视动画</div>
</li>
<li class="normal" onmouseover="nTabs(this,1);">
<div style="width:88px">建筑表现</div>
</li>
<li class="normal" onmouseover="nTabs(this,2);">
<div style="width:88px">游戏美术</div>
</li>
<li class="normal" onmouseover="nTabs(this,3);">
<div style="width:88px">电视包装</div>
</li>
<li class="normal" onmouseover="nTabs(this,4);">
<div style="width:88px">超媒体设计</div>
</li>
</ul>
</div>
<!-- 内容开始 -->
<div class="TabContent">
<div id="myTab0_Content0">
<table width="537" height="132" border="0" cellpadding="0" cellspacing="0" class="bk_2">
<tr>
<td width="30%"><div align="center"><img name="bjzx_r11_c5" src="/img/bjzx/bjzx_r11_c5_1.jpg" width="140" height="105" border="0" id="bjzx_r11_c5" alt="" /></div></td>
<td><span class="biaoti">影视课程</span><br />
由资深设计师执教，使学员能够全面系统的掌握。由资深设计师执教，使学员能够全面系统的掌握。<br />
<img alt="" src="/images/article_ontop.gif" /> <a class="blulink" target="_blank" href="/c/yscqb.html">影视动画长期班</a> <img alt="" src="/images/article_ontop.gif" /> <a class="blulink" target="_blank" href="/c/yshqcq.html">影视后期长期班课程</a><br />
<img alt="" src="/images/article_ontop.gif" /> <a class="blulink" target="_blank" href="/c/ysmxdq.html">影视模型专业短期班课程</a><br />
<img alt="" src="/images/article_ontop.gif" /> <a class="blulink" target="_blank" href="/c/ysxr.html">影视渲染专业短期班课程</a> <img alt="" src="/images/article_ontop.gif" /> <a class="blulink" target="_blank" href="/c/hqdq.html">影视后期合成专业短期班课程</a><br />
<img alt="" src="/images/article_ontop.gif" /> <a class="blulink" target="_blank" href="/c/ysdhqnb.html">影视制作全科班</a> <img alt="" src="/images/article_ontop.gif" /> <a class="blulink" target="_blank" href="/c/ystx.html">影视特效专业提高班课程</a></td>
</tr>
</table>
</div>
<div id="myTab0_Content1" class="none">
<table width="537" height="132" border="0" cellpadding="0" cellspacing="0" class="bk_2">
<tr>
<td width="30%"><div align="center"><img name="bjzx_r11_c5" src="/img/bjzx/bjzx_r11_c5_4.jpg" width="140" height="105" border="0" id="bjzx_r11_c5" alt="" /></div></td>
<td><span class="biaoti">建筑表现</span><br />
由资深设计师执教，使学员能够全面系统的掌握。由资深设计师执教，使学员能够全面系统的掌握。 <br />
<img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/jzbxcqb.html">建筑表现专业长期班</a> <img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/jzbxqkb.html">建筑表现全科班 </a><br />
<img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/yingyong.html">3ds max 应用班</a> <img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/snbxb.html">室内表现班</a> <img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/jzmxb.html">建筑模型班</a> <img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/jzxrb.html">建筑渲染班</a> <br />
<img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/dhhqb.html">建筑动画及后期班</a></td>
</tr>
</table>
</div>
<div id="myTab0_Content2" class="none">
<table width="537" height="132" border="0" cellpadding="0" cellspacing="0" class="bk_2">
<tr>
<td width="30%"><div align="center"><img name="bjzx_r11_c5" src="/img/bjzx/bjzx_r11_c5_3.jpg" width="140" height="105" border="0" id="bjzx_r11_c5" alt="" /></div></td>
<td><span class="biaoti">游戏动画设计制作</span><br />
由资深设计师执教，使学员能够全面系统的掌握。由资深设计师执教，使学员能够全面系统的掌握。<br />
<br />
<img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/wlyxmscqb.html">网络游戏美术班</a> <img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/game.html">次世代游戏美术班</a> </td>
</tr>
</table>
</div>
<div id="myTab0_Content3" class="none">
<table width="537" height="132" border="0" cellpadding="0" cellspacing="0" class="bk_2">
<tr>
<td width="30%"><div align="center"><img name="bjzx_r11_c5" src="/img/bjzx/bjzx_r11_c5_2.jpg" width="140" height="105" border="0" id="bjzx_r11_c5" alt="" /></div></td>
<td><p><span class="biaoti">电视包装</span><br />
由资深设计师执教，使学员能够全面系统的掌握。由资深设计师执教，使学员能够全面系统的掌握。<br />
<br />
<img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/lmbzqkb.html">电视栏目包装全科班</a> <img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/lmbzgjb.html">电视栏目包装高级班 </a><br />
</p></td>
</tr>
</table>
</div>
<div id="myTab0_Content4" class="none">
<table width="537" height="132" border="0" cellpadding="0" cellspacing="0" class="bk_2">
<tr>
<td width="30%"><div align="center"><img name="bjzx_r11_c5" src="/img/bjzx/bjzx_r11_c5_5.jpg" width="140" height="105" border="0" id="bjzx_r11_c5" alt="" /></div></td>
<td><p><span class="biaoti">艺术设计</span><br />
由资深设计师执教，使学员能够全面系统的掌握。由资深设计师执教，使学员能够全面系统的掌握。<br />
<br />
<img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/cmtsjsqkb.html">超媒体设计全科班</a> <img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/ps.html">平面设计班 </a><img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/painter.html">数码插画班 </a><br />
<img alt="" src="/images/article_ontop.gif" /> <a class="blulink" href="/c/web.html">网页美术设计班</a><br />
</p></td>
</tr>
</table>
</div>
</div>
</div>
