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
投稿猜你喜欢
- 1提取 PDF 内容# pip install PyPDF2 安装 PyPDF2import PyPDF2from PyPDF2
- 二维码作为一种信息传递的工具，在当今社会发挥了重要作用。从手机用户登录到手机支付，生活的各个角落都能看到二维码的存在。那你知道二维码是怎么解
python如何将字母转化为数字?将英文字母转成数字：转换ord('F')反转chr(70)python ord() 函数是- 前言：目前我们使用的绝大多数计算机程序，无论是办公软件，浏览器，甚至游戏、视频都是通过菜单界面系统配置的，它几乎成了我们使用机器的默认方式。
- JetBrains针对学生推出了免费使用资格，但是很多同学却不知道或者说不知道怎样获得免费资格，只能千辛万苦的去寻找破解密钥，但现在JetB
- 在python中可以使用json将数据格式化为JSON格式：1.将字典转换成JSON数据格式：s=['张三','年龄
- 服务端渲染及session鉴权服务端渲染服务端渲染简单来说就是前端页面是由服务器通过字符串拼接动态生成的，客户端不需要额外通过Ajax请求参
- 本文实例讲述了python使用Flask框架获取用户IP地址的方法。分享给大家供大家参考。具体如下：下面的代码包含了html页面和pytho
- 本文实例讲述了JS数组中对象去重操作。分享给大家供大家参考，具体如下：<!DOCTYPE html><html lang=
- 1、简单的按钮js事件 用于判断和显示提示 <script type="text/javascript&
- 本文实例讲述了Python PyAutoGUI模块控制鼠标和键盘实现自动化任务。分享给大家供大家参考，具体如下：PyAutoGUI是用Pyt
- 一些大型站点都有着非常一流的视觉外观，它们很可能在设计时使用了网格系统。网格可以是页面布局显得紧凑而且稳定，为设计师在设计站点时提供一个逻辑
- 前言密码安全是非常重要的，因此我们在代码中往往需要对密码进行加密，以此保证密码的安全加依赖<!-- jasypt --><
- 1. 什么是索引索引是在数据库表的字段上添加的，是为了提高查询效率存在的一种机制。一张表的一个字段可以添加一个索引，当然，多个字段联合起来也
- 转自： http://www.qqread.com/mysql/z442108305.html对于程序开发人员而言，目前使用最流行的两种后台
- chr(13) 是一个回车Chr(10) 是一个换行符chr
- 1.remove: 删除单个元素，删除首个符合条件的元素，按值删除，从左向右依次删除符合条件的值举例说明:>>> str=
- 每次装完系统之后都要重新安装一些软件，安装软件的时候又要上网查找安装的教程，比较麻烦，所以就自己整理了mysql-8.0.15-winx64
- 本文实例讲述了Python基于正则表达式实现检查文件内容的方法分享给大家供大家参考，具体如下：这个是之前就在学python，欣赏python
- scrapy是目前python使用的最广泛的爬虫框架架构图如下解释：Scrapy Engine(引擎): 负责Spider、ItemPipe
