位置: 编程技术 - 正文

JS实现选项卡实例详解(js实现框选)

编辑:rootadmin

推荐整理分享JS实现选项卡实例详解(js实现框选),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jsp 选项卡,js实现简单的选项卡实验报告,js做选项卡,javascript选项,js实现框选,js选项卡css,js做选项卡,js做选项卡,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例讲述了JS实现选项卡的方法。分享给大家供大家参考,具体如下:

思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。

1、首先获取元素。

2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。

3、因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。

4、把当前按钮添加样式,把当前DIV显示出来,display设置为block。

注:给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换,当前按钮高度,点击和按钮高亮就是2个事件,所以要用2个for循环历遍。

HTML代码:

JS代码:

补充:用js写简单选项卡完整步骤

JS实现选项卡实例详解(js实现框选)

如图,最简单的纯粹的选项卡

第一步,当然是先写html代码和css样式

第二步,实现简单的切换效果

要点1:abc.document.getElementsByTagName("li"):取得abc下面的所有标签为li的元素,返回的是一个元素集合,有数组的一些属性。

要点2:循环,先循环给li加上onclick事件,再onlink事件点击的时候,再循环让所有选项卡的act样式去掉,所有的内容隐藏。然后让所点击的选项及对应内容显示。

要点3:tab_t_li[i].index = i; 在循环时,给选项卡加一个额外的属性并赋值,以做选项卡和内容的对应。

第三步,写成函数。上面的写法只能一个页面用一个选项卡,如果再加一个的话,就需要复制一份,再改很多变量名。

要点:tab_t_li[i][evt] 因为传值的时候是字符串,如果直接写的话就是tab_t_li[i]."onclick"这样话是执行不了的,tab_t_li["onclick"]这样执行没问题。

好了,现在一个页面上就可以有多个切换了,只需要调用函数的时候,写上相应的id名和标签名,事件名称就可以了

希望本文所述对大家JavaScript程序设计有所帮助。

JS封装cookie操作函数实例(设置、读取、删除) 本文实例讲述了JS封装cookie操作函数。分享给大家供大家参考,具体如下:/*设置cookie*/functionsetCookie(name,value,iDay){varoDate=newDate();oDate.setDate(oDate.getDate()+iD

javascript下拉列表中显示树形菜单的实现方法 很简单的一个使用:点击菜单,能够显示下面的或者不显示。1、主要目的:展现的是的一个菜单项,然后点击一下,隐藏,点一下,弹出下面的内容用

javascript中checkbox使用方法简单实例演示 演示一个小小的例子:在购物车里面,我们能够勾选自己所选的商品,然后能够显示出相应的价格。1、首先显示出相应的界面:相关代码:body商品列表

标签: js实现框选

本文链接地址:https://www.jiuchutong.com/biancheng/384638.html 转载请保留说明!

上一篇:总结JavaScript中布尔操作符||与&&的使用技巧(简述javascript中的函数)

下一篇:JS封装cookie操作函数实例(设置、读取、删除)(js如何封装)

  • 增值税发票记账联和抵扣联都丢了怎么办
  • 自动售货机进货渠道
  • 企业增资会计处理流程
  • 营改增对房地产行业的影响
  • 商业零售企业实行增值税后购进商品业务的账务处理
  • 福利费实物发放标准
  • 股权转让个人交的印花税可以入账吗
  • 个人销售货物缴纳增值税吗
  • 税率开错跨月没法收回
  • 泡菜增值税率
  • 携税宝报税操作流程
  • 促销费属于哪个税目
  • 税控盘抵增值税表怎么填
  • 建安官网
  • 加油发票的票据抬头是个人,这样可报销吗?
  • 小规模纳税人和一般纳税人哪个好
  • 物业费属于什么合同
  • 商誉在报表中如何填列
  • 公司转让税费如何计算
  • 企业研发过程中特殊收入的会计处理
  • 跨月发票作废应如何处理
  • 收到工程结算单,怎么回复不认可
  • vivo手机可以安装鸿蒙
  • bootcamp怎么直接安装
  • 进货折扣是怎么计算
  • 笔记本投屏到电视
  • PHP:pg_meta_data()的用法_PostgreSQL函数
  • 跟银行借入长期存款
  • 母公司收取子公司管理费用比例
  • 房地产企业利润
  • 厂区绿化工程计入什么科目
  • 会计政策变更累计数
  • php产品
  • 会计开税票的表格范本
  • uniapp官方教程
  • vuex中this.$store.commit和this.$store.dispatch的用法
  • 图书发票怎么报销的
  • 工具tj
  • web核心的三个标准
  • 去年的所得税计提多了怎么做分录
  • 个人提供翻译服务
  • 从公账发工资是什么凭证
  • 三代手续费企业所得税
  • 报销员工电话费怎么算
  • 残保金是什么单位收的
  • 国网统一开发平台uap
  • 代销费是谁给谁
  • 确认收入时还没交税
  • 出租车发票可以重新打印吗
  • 利息应怎么录入收入
  • sql server更新数据
  • 小型微利企业认定标准最新
  • 本票包括哪些
  • 处置子公司利润表怎么合并
  • 商业承兑汇票销售产品会计分录
  • 个人垫付的费用如何向单位报销行政单位
  • 建筑图纸设计费多少钱
  • sql server高级应用
  • mysql如何优化性能
  • 所有符合条件x+5的绝对值加x- 2的绝对值等于七的数x
  • win10系统设置快捷键
  • Kaspersky Rescue Disk 2009.04.16 卡巴斯基救援盘
  • windows vista界面
  • win打开本地策略
  • centos gogs
  • reg注册表格式文件
  • win8.1的开始菜单在哪
  • win10edge浏览器下载被阻止
  • centos7脚本
  • windows8安装密钥永久
  • win8.1系统安装
  • js创建对象的方法有哪些
  • prototype.js中文文档
  • Bullet(Cocos2dx)之交叉编译Android,集成到cocos2dx3.x
  • unity3d android 插件
  • shell脚本调用脚本
  • 哪些润滑油属于润滑剂
  • 电子税务局房产税税源信息采集
  • 刷医保的网络可以用外网吗
  • 江苏个体户年报怎么填
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设