你现在的位置:首页》DW学习
欢迎光临菜鸟网站,请留下你的宝贵意见,我会不断改进!


tab选项卡效果学习

学习资料

  • 视频教材
  • 文字教材
  • 工具使用
  • 学习技巧
  • 作品欣赏
第一层内容

实例教程

  • 图片处理
  • 图片合成
  • 抠图方法
  • 溶图方法
  • 调色方法
  • 视频实例
  • 鼠绘实例
  • 人物
  • 国画
  • 文字实例
  • 动画实例
第一层内容

素材中心

  • 软件
  • 样式
  • 字体
  • PSD模板
  • 笔刷
第一层内容

看到上面tab选项卡效果了吧,教材地址:http://www.aa25.cn/733.shtml 学习过程并不一帆风顺,复制代码后,修改文字倒也简单,想增加内容,一不小心,就又出问题了,我把第二块“实例教程”菜单增加到11项,那么既要修改JS内容,也要修改DIV里的内容,化了不少时间,求了不少人,还是乐天群友帮忙完成这个实例,还是记录一下吧,免得以后又忘记:
JS 部分:
window.onload = function(){
var SDmodel = new scrollDoor();
SDmodel.sd(["m01","m02","m03","m04","m05"],["c01","c02","c03","c04","c05"],"sd01","sd02");
SDmodel.sd(["mm01","mm02","mm03","mm04","mm05","mm06","mm07","mm08","mm09","mm10","mm11"],["cc01","cc02","cc03","cc04","cc05","cc06","cc07","cc08","cc09","cc10","cc11"],"sd01","sd02");
SDmodel.sd(["mmm01","mmm02","mmm03","mmm04","mmm05"],["ccc01","ccc02","ccc03","ccc04","ccc05"],"sd01","sd02");
}
DIV部分:
<h2>实例教程</h2>
<ul class="scrollUl">
<li class="sd01" id="mm01">图片处理</li>
<li class="sd02" id="mm02">图片合成</li>
<li class="sd02" id="mm03">抠图方法</li>
<li class="sd02" id="mm04">溶图方法</li>
<li class="sd02" id="mm05">调色方法</li>
<li class="sd02" id="mm06">视频实例</li>
<li class="sd02" id="
mm07">鼠绘实例</li>
<li class="sd02" id="
mm08">人物</li>
<li class="sd02" id="
mm09">国画</li>
<li class="sd02" id="
mm10">文字实例</li>
<li class="sd02" id="
mm11">动画实例</li>
</ul>
<div class="bor03 cont">
<div id="cc01">
第一层内容
</div>
<div id="cc02" class="hidden">
第二层内容
</div>
<div id="cc03" class="hidden">
第三层内容
</div>
<div id="cc04" class="hidden">
第四层内容
</div>
<div id="cc05" class="hidden">
第五层内容
</div>
<div id="cc06" class="hidden">
第六层内容
</div>
<div id="cc07" class="hidden">
第七层内容
</div>
<div id="
cc08" class="hidden">
第八层内容
</div>
<div id="
cc09" class="hidden">
第九层内容
</div>
<div id="
cc10" class="hidden">
第十层内容
</div>
<div id="
cc11" class="hidden">
第十一层内容
</div>

* 注意:紫色文字要同步修改,我呢,粗心了点,多化了不少时间,呵呵!教材原创:“十三妖”,在此一并谢谢了。

2009年3月25日