收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2146|回复: 2

指南新手完成滑动门和TAB切换(比较简单的)

[复制链接]
发表于 2007-11-30 09:57:41 | 显示全部楼层 |阅读模式
这类型东西网上多的是,但朋友说我的程序程序理念好(嘻…),我也写一个tab切换,厚着脸皮把它叫麦鸡的TAB切换(汗一把先.),转载也请注明麦鸡的博客,下面就开始了

给的是一个思路,方法很多,高手就略过了

先给出测试页面
测试通过ie6+,ff2,opera9
http://www.wler.cn/blog/lab/maiji_tab.html




先完成xhtml和css

我们的导航需要一张图片,简单起见,就用一张了


html 就这么简单

  1. <dl class="nav" id="maiji_tab">
  2. <!--==========================-->
  3. <dt class="on"><a href="#this" onclick="maiji_tab(0)"><span>精品文章</span></a></dt>
  4. <dt><a href="#this" onclick="maiji_tab(1)"><span>视频</span></a></dt>
  5. <dt><a href="#this" onclick="maiji_tab(2)"><span>照片</span></a></dt>
  6. <dt><a href="http://www.wler.cn/blog" target="_blank"><span>麦鸡的博客</span></a></dt>

  7. <!--==========================-->
  8. <dd class="on">
  9.   <p>精品文章啊!<a href="http://www.wler.cn/blog" target="_blank">麦鸡的博客欢迎你!</a></p>
  10. </dd><dd>
  11.   <p>视频啊!<a href="http://www.wler.cn/blog" target="_blank">麦鸡的博客欢迎你!</a></p>
  12. </dd><dd>
  13.   <p>你的照片呢?<a href="http://www.wler.cn/blog" target="_blank">麦鸡的博客欢迎你!</a></p>
  14. </dd>

  15. </dl>
复制代码


css

  1. /*  简单吧!  */
  2. .nav{position:relative; width:400px}
  3. .nav dt{float:left; margin:0 2px 0 0; position:relative; z-index:2}
  4. .nav dt a{color:#555; text-decoration:none}
  5. .nav dt a:hover{color:#000}
  6. .nav dt a{
  7.     float:left; display:block; height:24px; line-height:26px; overflow:hidden;
  8.     background:url(http://www.wler.cn/blog/img/mj_bg.gif) no-repeat 0 -24px
  9. }
  10. .nav dt a span{
  11.     display: block; padding:0 15px 0 0; margin:0 0 0 15px;
  12.     background:url(http://www.wler.cn/blog/img/mj_bg.gif) no-repeat right -24px
  13. }
  14. .nav dt.on a{background-position:0 0}
  15. .nav dt.on a span{background-position:right 0}
  16. .nav dd{
  17.     background:#fff; border:solid 1px #ccc; width:400px; margin:0; padding:10px;
  18.     position:absolute; left:0; top:23px; z-index:1; visibility:hidden
  19. }
  20. .nav dd.on{visibility:visible}
复制代码



javascript

  1. var maiji_tab = function(num){
  2. var dtArray = document.getElementById('maiji_tab').getElementsByTagName("dt");//获取dt节点
  3. var ddArray = document.getElementById('maiji_tab').getElementsByTagName("dd");
  4. for (var i = 0; i < ddArray.length; i++){
  5.         dtArray[i].className = '';
  6.         ddArray[i].className = '';
  7. }
  8.         dtArray[num].className = 'on';
  9.         ddArray[num].className = 'on';
  10. }
复制代码


更多精彩请看 http://www.wler.cn/blog/index.php/maiji/10http://www.wler.cn/blog/index.php/maiji/10


看完了 出个题目  使它扩展为自动切换(-_-!) 简单的哦...

[[i] 本帖最后由 buliuming 于 2007-11-30 10:30 编辑 ]
发表于 2007-11-30 10:03:46 | 显示全部楼层
支持,为啥TAB和内容不对齐啊??
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-11-30 10:07:13 | 显示全部楼层
不对齐?  哪里?   http://www.wler.cn/blog/lab/maiji_tab.html
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-10-22 07:11 , Processed in 0.078902 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表