JavaScript版TAB选项卡效果实例


Posted in Javascript onAugust 16, 2013
<!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>JavaScript版TAB选项卡</title>
<script type="text/javascript">
function changeTab(id, minId, topCount)
        {
            for(var i=minId; i < minId+topCount; i++)
            {
                if( id == i)
                {
                    document.getElementById("li_" + i).className = "on";
                    document.getElementById("html_" + i).style.display = "block";      
                }
                else
                {
                    document.getElementById("li_" + i).className = "";
                    document.getElementById("html_" + i).style.display = "none";
                }
            }
        }
</script>
<style type="text/css">
.none{display:none;}
ul,li{list-style:none; margin:0; padding:0; font-size:12px;}
.tab{margin:100px;}
.tabTitle ul{overflow:hidden; zoom:1; border-left:1px solid #D5D3D4;}
.tabTitle li{width:82px; height:30px; line-height:30px; float:left; text-align:center; background:url(/2010/07/tab1.jpg) no-repeat;}
.tabTitle li.on{background:url(/uploads/2010/07/tab2.jpg) no-repeat;}
#html_1,#html_2,#html_3,#html_4,#html_5,#html_6{border:1px solid #D5D3D4; border-top:none; width:245px; height:100px;}
</style>
</head>
<body>
<div class="tab">
 <div class="tabTitle">
  <ul>
   <li id="li_1" class="on" onmouseover="changeTab(1, 1, 3);">本日热门</li>
   <li id="li_2" onmouseover="changeTab(2, 1, 3);">本周热门</li>
   <li id="li_3" onmouseover="changeTab(3, 1, 3);">本月热门</li>
  </ul>
 </div>
 <div id="html_1">
  内容1
 </div>
 <div id="html_2"  class="none">
  内容2
 </div>
 <div id="html_3"  class="none">
  内容3
 </div>
</div>
<div class="tab">
 <div class="tabTitle">
  <ul>
   <li id="li_4" class="on" onmouseover="changeTab(4, 4, 3);">本日推荐</li>
   <li id="li_5" onmouseover="changeTab(5, 4, 3);">本周推荐</li>
   <li id="li_6" onmouseover="changeTab(6, 4, 3);">本月推荐</li>
  </ul>
 </div>
 <div id="html_4">
  内容1
 </div>
 <div id="html_5"  class="none">
  内容2
 </div>
 <div id="html_6"  class="none">
  内容3
 </div>
</div>
</body>
</html></td>
   </tr>
 </table>                   
Javascript 相关文章推荐
js对象数组按属性快速排序
Jan 31 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
Javascript 数组排序详解
Oct 22 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
在vue中,v-for的索引index在html中的使用方法
Mar 06 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 #Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 #Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 #Javascript
动态加载script文件的两种方法
Aug 15 #Javascript
js string 转 int 注意的问题小结
Aug 15 #Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 #Javascript
js控制表单操作的常用代码小结
Aug 15 #Javascript
You might like
用PHP生成自己的LOG文件
2006/10/09 PHP
Windows下的PHP5.0详解
2006/11/18 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
PHP反射基础知识回顾
2020/09/10 PHP
javascript 定义新对象方法
2010/02/20 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python通过floor函数舍弃小数位的方法
2015/03/17 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
介绍一下linux的文件权限
2012/02/15 面试题
瀑布模型都有哪些优缺点
2014/06/23 面试题
给朋友的道歉信
2014/01/09 职场文书
美术毕业生求职信
2014/02/25 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
个人委托书如何写
2014/09/25 职场文书
2016元旦晚会主持词
2015/07/01 职场文书