编程 Javascript

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下阻止表单重复提交、防刷新、防后退

Aug 17 Javascript

js，jquery滚动/跳转页面到指定位置的实现思路

Jun 03 Javascript

使用Node.js实现一个简单的FastCGI服务器实例

Jun 09 Javascript

Webpack 实现 Node.js 代码热替换

Oct 22 Javascript

微信小程序 location API实例详解

Oct 02 Javascript

node.js请求HTTPS报错：UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法

Dec 18 Javascript

vue2.0 elementUI制作面包屑导航栏

Feb 22 Javascript

详解基于Vue-cli搭建的项目如何和后台交互

Jun 29 Javascript

vue的keep-alive中使用EventBus的方法

Apr 23 Javascript

React-redux实现小案例（todolist）的过程

Sep 29 Javascript

vue打包通过image-webpack-loader插件对图片压缩优化操作

Nov 12 Javascript

vue+elementUI实现表格列的显示与隐藏

Apr 13 Vue.js

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网页游戏学习之Xnova(ogame)源码解读（十二）

2014/06/25 PHP

php实现根据url自动生成缩略图的方法

2014/09/23 PHP

PHP PDO fetch 模式各种参数的输出结果一览

2015/01/07 PHP

json 实例详细说明教程

2009/10/31 Javascript

用JS判别浏览器种类以及IE版本的几种方法小结

2011/08/02 Javascript

页面载入结束自动调用js函数示例

2013/09/23 Javascript

js计算两个时间之间天数差的实例代码

2013/11/19 Javascript

JS生成不重复随机数组的函数代码

2014/06/10 Javascript

JS实现黑色风格的网页TAB选项卡效果代码

2015/10/09 Javascript

详解Angular.js的$q.defer()服务异步处理

2016/11/06 Javascript

js如何判断是否在iframe中及防止网页被别站用iframe嵌套

2017/01/11 Javascript

JavaScript闭包和回调详解

2017/08/09 Javascript

浅谈Node Inspector 代理实现

2017/10/19 Javascript

vuex 项目结构目录及一些简单配置介绍

2018/04/08 Javascript

Vue js 的生命周期（看了就懂）(推荐)

2019/03/29 Javascript

layui-table获得当前行的上/下一行数据的例子

2019/09/24 Javascript

vue实现一个6个输入框的验证码输入组件功能的实例代码

2020/06/29 Javascript

详解Vue的异步更新实现原理

2020/12/22 Vue.js

[02:20]DOTA2中文配音宣传片

2013/05/22 DOTA

python中MethodType方法介绍与使用示例

2017/08/03 Python

使用PyOpenGL绘制三维坐标系实例

2019/12/24 Python

探秘TensorFlow 和 NumPy 的 Broadcasting 机制

2020/03/13 Python

python+selenium+chrome批量文件下载并自动创建文件夹实例

2020/04/27 Python

美国隐形眼镜销售网站：ContactsDirect

2017/10/28 全球购物

将世界上最美丽的摄影作品转化为艺术作品：Photos.com

2017/11/28 全球购物

Doyoueven官网：澳大利亚健身服饰和配饰品牌

2019/03/24 全球购物

TheFork葡萄牙：欧洲领先的在线餐厅预订平台

2019/05/27 全球购物

实习生的自我评价

2014/01/08 职场文书

欢送退休感言

2014/02/08 职场文书

运动会跳远加油稿

2014/02/20 职场文书

护士2014年终工作总结

2014/11/11 职场文书

2016学习雷锋精神活动倡议书

2015/04/27 职场文书

2015年科学教研组工作总结

2015/07/22 职场文书

小学运动会宣传稿

2015/07/23 职场文书

（迎国庆）作文之我爱我的祖国

2019/09/19 职场文书

Canvas跟随鼠标炫彩小球的实现

2021/04/11 Javascript