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 相关文章推荐
javascript,jquery闭包概念分析
Jun 19 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
jQuery中:first-child选择器用法实例
Dec 31 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
将Datatable转化成json发送前台实现思路
2013/09/06 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
js转换对象为xml
2017/02/17 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
python从入门到精通(DAY 3)
2015/12/20 Python
selenium+python实现自动登录脚本
2018/04/22 Python
Python 将pdf转成图片的方法
2018/04/23 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
解决pycharm最左侧Tool Buttons显示不全的问题
2019/12/17 Python
django 读取图片到页面实例
2020/03/27 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
应用艺术专业个人的自我评价
2014/01/03 职场文书
环保倡议书怎么写
2014/05/16 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
机动车交通事故协议书
2015/01/29 职场文书
毕业实习单位意见
2015/06/04 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python