这个效果怎么 用jquery做 但效果不好啊
图片:
tab页？
几个DIV轮流切换嘛～
作者: anad007
发布时间: 2009-06-15
作者: zhumq1982
发布时间: 2009-06-20
hhh
作者: chenhaiyang
发布时间: 2009-06-22
很多这种插件~效果也不错的说~
不过一般的都是控制ul->li的
作者: chenhaiyang
发布时间: 2009-06-22
自己写，不会超过１０行代码的。
注意使用index
作者: kazaff
发布时间: 2009-06-24
复制代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>jQuery Tabs By Await [url]http://leotheme.cn/[/url]</title>
- <style>
- * { margin:0 auto; padding:0; font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px; }
- ul { list-style: none;}
- p {width: 450px; border:1px solid #88AAD6; padding: 5px 10px; text-align: right;}
- .tabbox{ position: relative; width:450px; height: 140px; margin:0 auto; border:1px solid #88AAD6; margin-top: 100px; padding: 10px;}
- .tabnavi { position: relative; left: 0; top: 0; z-index: 999; float: left;}
- .tabnavi li{ width:80px; height:24px; font-weight:bold; line-height: 24px; margin: 10px 0; border:1px solid #88AAD6; background:#eeeeff; color:#999; text-align:center;}
- .tabnavi li.current{ background:#fff; border-right: 1px solid #fff; color:#290052; }
- .tabContent{ position: relative; z-index: 99;float:left; margin-left: -1px; border:1px solid #88AAD6; padding:10px; width:347px; height:120px; }
- .clear {clear: both;}
- </style>
- <script type="text/javascript" src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script>
- <script>
- $(function(){
- $(".tabContent div:not(:first)").hide();
- $(".tabnavi li").each(function(index){
- $(this).click(
- function(){
- $(".tabnavi li.current").removeClass("current");
- $(this).addClass("current");
- $(".tabContent > div:visible").hide();
- $(".tabContent div:eq(" + index + ")").show();
- })
- })
- })
- </script>
- </head>
- <body>
- <div class="tabbox">
- <ul class="tabnavi">
- <li class="current">首页</li>
- <li>关于</li>
- <li>相册</li>
- </ul>
- <div class="tabContent">
- <div>[url]http://leotheme.cn/[/url]</div>
- <div>[url]http://leotheme.cn/about[/url]</div>
- <div>[url]http://leotheme.cn/photo[/url]</div>
- </div>
- <div class="clear"></div>
- </div>
- <p>By Await 2009:06:11</p>
- </body>
- </html>
|
作者: Noker
发布时间: 2009-06-24
作者: await
发布时间: 2009-06-26
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
如何安装mysql8.0
Word快速设置标题样式步骤详解
20+道必知必会的Vue面试题（附答案解析）
HTML如何制作表单
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
ET文件格式和XLS格式文件之间如何转化？
react和vue的区别及优缺点是什么
支付宝人脸识别如何关闭?
腾讯微云怎么修改照片或视频备份路径?
