位置: 编程技术 - 正文

javascript实现tab切换的四种方法(js tab页面切换)

编辑:rootadmin

推荐整理分享javascript实现tab切换的四种方法(js tab页面切换),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js tab页面切换,js tab,javascript tab,javascript tab,jsp tab,javascript tag,js tabs,javascript tag,内容如对您有帮助,希望把文章链接给更多的朋友!

tab切换在网页中很常见,故最近总结了4种实现方法。首先,写出tab的框架,加上最简单的样式,代码如下:

现在的显示效果如下图:

javascript实现tab切换的四种方法(js tab页面切换)

四个tab标题和四个内容区都显示在了页面中,现在要实现tab切换效果,即点击标题一,内容一显示出来,其他内容不显示;点击标题二,内容二显示出来,其他内容不显示……那么,整体思路很简单,给四个标题绑定事件,触发的时候对应的内容显示,其他的内容隐藏。

方法一:点击标题对应的内容显示,非点击标题对应的内容隐藏。代码如下:

方法二:先设置所有内容隐藏,然后点击标题对用的内容显示。代码如下:

方法三:显示和隐藏通过是有拥有class控制,先把所有的内容隐藏dispaly设为none,而该class的display设置为block,遍历所有标题节点和内容节点,点击标题后,该标题节点和对用的内容节点拥有class,其他的没有。代码如下:

该方法的缺点是,内容块的div下面不能再有div标签了。

方法四:不用js,用“input:checked”来做tab切换,先把所有的内容隐藏,被选中的内容显示。代码如下:

该方法的缺点是,不同区域切换只能通过点击。

标签: js tab页面切换

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

上一篇:JavaScript精炼之构造函数 Constructor及Constructor属性详解(javascript 语言精粹(修订版))

下一篇:js实现选中页面文字将其分享到新浪微博(js选中div)

  • 增值税附加税是几个点
  • 增值税是5%的是什么
  • 现金日记账承前页过次页
  • 公司代扣代缴社保怎么操作
  • 高工资怎么说
  • 收到国家退税
  • 房租当月无发票怎么办
  • 股票收入要交所得税吗
  • 核定征收的个人所得税怎么申报
  • 国企不交社保怎么办
  • 领购增值税专用发票
  • 小规模纳税人销售农产品税率是多少
  • 营改增之后账务怎么处理
  • 广告租赁公司
  • 调整暂估有差价怎么办
  • 电子汇票贴现怎样操作
  • 怎么查企业的增值税纳税额
  • 车辆购置税完税证明电子版二维码怎么扫
  • 土地交易服务费分录
  • 小程序交易需要什么条件
  • 金税盘百旺和航天
  • 专项应付款怎么转固定资产
  • 福利费计提包括奖金吗
  • 公司变更名称重新申请
  • 收到工会经费返还属于现金流量表哪
  • 企业所得税应纳税额的计算公式
  • 公司必须开基本户才能开发票吗
  • win10蓝屏怎么弄
  • php读取opc
  • 企业向个人借款是否合法
  • 核定征收的企业注销需要缴纳个人所得税吗
  • vue 登录模板
  • 完成认证后开具什么证明
  • 漫天花雨异闻
  • Python图像识别实战(四):搭建卷积神经网络进行图像二分类(附源码和实现效果)
  • 软考备考时间
  • vue移动
  • 伪类的常见类型
  • mkisofs命令
  • 微信公众平台官网
  • 收到工程款怎么做凭证
  • 用现金报销差旅费及增值税怎么做账
  • 赠品视同销售会计分录要如何编制?
  • 政府奖励需要缴纳增值税吗
  • 服务费减免税款怎么算
  • 出口业务的会计处理
  • 哪些发票可以抵扣?
  • 发票普票增票
  • 企业所得税退税怎么操作流程
  • 其他货币资金是什么科目
  • 横幅属于是什么税收大类?
  • sql server 排名函数
  • 火车票可以抵扣进项税
  • 个体户如何填报工商年报资金数额
  • 期初金额是什么
  • 让渡资产使用权什么意思
  • 租赁公司账务科目
  • 以前年度损益调整
  • 待发货订单是什么意思
  • 税控维护费减免税款
  • 加计抵减附加税怎么算
  • 新手会计做账怎么做账
  • mysql类型varchar长度
  • MySql 5.6.14 winx64配置方法(免安装版)
  • win7怎么更改音频输出
  • debian和ubuntu命令一样吗
  • freebsd怎么安装
  • win10任务栏恢复原样
  • hpg是什么软件打开
  • centos 安装
  • node+express+ejs制作简单页面上手指南
  • dos跳转到指定目录
  • pm2启动nodejs
  • javascript实现3D切换焦点图
  • js判断checkbox是否被选中
  • javascript对象的常用方法
  • javascript 默认参数
  • 成都市个人房屋出租税费
  • 福建电子税务局社保缴费操作
  • 芜湖办税服务厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设