js实现tab选项卡函数代码
发布时间：2024-04-19 10:43:25
标签：js,tab,选项卡
<html> <head> <style type="text/css"> * { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-bottom: #000 1px solid; border-left: #000 1px solid; border-top: #000 1px solid; border-right: #000 1px solid; } .tab UL { zoom: 1; clear: both; } .tab UL:after { display: block; height: 0px; visibility: hidden; clear: both; content: ""; } .tab UL LI { text-align: center; line-height: 26px; width: 60px; display: inline; background: #000; float: left; height: 26px; color: #fff; } .tab UL LI.on { background: #fff; color: #000; } .tabList { border-bottom: #000 1px solid; border-left: #000 1px solid; height: 150px; border-top: #000 1px; border-right: #000 1px solid; } .tabList .one { padding-bottom: 10px; padding-left: 10px; padding-right: 10px; display: none; color: #ff0000; padding-top: 10px; } .tabList .block { display: block; } </style> <script type="text/javascript"> function setTab(name,m,n){ for( var i=1;i<=n;i++){ var menu = document.getElementById(name+i); var showDiv = document.getElementById("cont_"+name+"_"+i); menu.className = i==m ?"on":""; showDiv.style.display = i==m?"block":"none"; } } </script> <meta name="GENERATOR" content="MSHTML 8.00.7600.16535"> </head> <body> <div class="wid240"> <div class="tab"> <ul> <li id="one1" class="on" onmouseover='setTab("one",1,4)'>one1 </li> <li id="one2" onmouseover='setTab("one",2,4)'>one2 </li> <li id="one3" onmouseover='setTab("one",3,4)'>one3 </li> <li id="one4" onmouseover='setTab("one",4,4)'>one4 </li> </ul> </div> <div class="tabList"> <div id="cont_one_1" class="one block"> cont_one_1</div> <div id="cont_one_2" class="one"> cont_one_2</div> <div id="cont_one_3" class="one"> cont_one_3</div> <div id="cont_one_4" class="one"> cont_one_4</div> </div> </div> <div class="wid180"> <div class="tab"> <ul> <li id="tow1" class="on" onclick='setTab("tow",1,3)'>tow1 </li> <li id="tow2" onclick='setTab("tow",2,3)'>tow2 </li> <li id="tow3" onclick='setTab("tow",3,3)'>tow3 </li> </ul> </div> <div class="tabList"> <div id="cont_tow_1" class="one block"> cont_tow_1</div> <div id="cont_tow_2" class="one"> cont_tow_2</div> <div id="cont_tow_3" class="one"> cont_tow_3</div> </div> </div> </body> </html>
0
投稿猜你喜欢
- <?php session_start(); $_SESSION['username']="zhuzhao&
- 一、添加user到group第一种：user.groups.add(1) # add by id第二种：from django.contri
本文记录了mysql 8.0.14 安装配置的过程，供大家参考，具体内容如下1.下载地址:下载地址找到zip压缩文件.2.配置环境变量把解压- 本篇文章主要是由于计划使用django写一个计划任务出来，可以定时的轮换值班人员名称或者定时执行脚本等功能，百度无数坑之后，终于可以凑合把这
- Google以其简洁的搜索框引领着互联网，搜索系统似乎成了每个网站必备品，甚至于是那些本身几乎是由静态页面组成的企业网站都要来个搜索功能，这
- 装饰器的应用场景附加功能数据的清理或添加:函数参数类型验证 @require_ints 类似请求前拦截数据格式转换 将函数返回字典改为 JS
- 由于pytorch的whl 安装包名字都一样，所以我们很难区分到底是基于cuda 的哪个版本。有一条指令可以查看import torchpr
- 前言这几天caffe2发布了，支持移动端，我理解是类似单片机的物联网吧应该不是手机之类的，试想iphone7跑CNN，画面太美~作为一个刚入
- ASP正则表达式，RegExp对象提供简单的正则表达式支持功能。RegExp对象的用法： Function RegExpTest(
- time简介世界上第一台计算机操作系统Unix是诞生于1970年，然后就开始了计算机的时间计算，所以我们计算机的时间是开始于1970年1月1
- 1. TokuFT file system space is really low and access is restricte
- 一、效果快放10倍总共分为三部分，左上角的正文，下方的心形和右下角的署名特别需要注意的一点是这种东西不但要装Python，还与分辨率有关(换
- 本周的豆知识分享就来深入研究一下window.event对象。请先看看下边的代码片断。 <button id=”btn”&g
- 建立合理的索引提高SQL Server的性能在应用系统中,尤其在联机事务处理系统中,对数据查询及处理速度已成为衡量应用系统成败的标准。而采用
- 前言selenium处理文件上传大致会有两种情况，一种是文件上传使用的是input标签元素，即<input type="fi
- return 语句就是讲结果返回到调用的地方，并把程序的控制权一起返回程序运行到所遇到的第一个return即返回（退出def块），不会再运行
- 开始码代码之前，我们先来了解一下三种邮件服务协议：1、SMTP协议SMTP(Simple Mail Transfer Protocol)，即
- 本文实例讲述了Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法。分享给大家供大家参考，具体如下：Matplot
- defer用于资源的释放，会在函数返回之前进行调用。如果有多个defer表达式，调用顺序类似于栈，越后面的defer表达式越先被调用。def
- Python2中编码相关的问题很是让人蛋疼，特别是中文字符。比如本文所述的中文网页GBK编码的诡异问题。现象例如：盲录職氓聭聵，其实网页里面
