位置: 编程技术 - 正文

jquery实现具有嵌套功能的选项卡(jquery可以实现哪些效果)

编辑:rootadmin

推荐整理分享jquery实现具有嵌套功能的选项卡(jquery可以实现哪些效果),希望有所帮助,仅作参考,欢迎阅读内容。

jquery实现具有嵌套功能的选项卡(jquery可以实现哪些效果)

文章相关热门搜索词:怎么用jquery,怎么用jquery,jquery可以实现哪些效果,jquery嵌套页面,jqueryhtml代码嵌入,使用jquery实现的项目,jquery放在哪,jquery嵌套页面,内容如对您有帮助,希望把文章链接给更多的朋友!

关于选项卡功能大家一定都不会陌生,无非就是鼠标点击或者悬浮能够切换相关的内容。通常情况下,大家见到的选项卡都是没有嵌套功能的,也就是说就是完成了一层切换效果,本章节分享一段代码实例,实现了选项卡的嵌套功能,也就是选项卡中嵌套有选项卡功能,也就能够容纳更多的内容。代码如下:

上面的代码实现了选项卡的嵌套功能,下面介绍一下它的实现过程。一.实现原理:原理其实非常的简单,其实就是大的选项卡里面套了一个小的选项卡,先进行大的选项卡的切换,然后再进行小的选项卡的切换,就是这么简单,这里就不多介绍了,具体可以看代码注释。二.代码注释:1.$(function(){}),文档结构完全加载完毕再去执行函数中的代码。2.$("#title li:first").addClass("new").siblings().addClass("old"),在默认状态下,为id属性值为title的元素下第一个li元素添加名为new的class类,然后为其他的兄弟li元素添加old的class类。也就是在默认状态下横向的选项卡第一个字体是红色,其他的都是黑色。3.$("#content div:first").show().siblings().hide(),将id为content下第一个div设置为显示,其他的兄弟元素隐藏。4.$(".inContent:first").show().siblings().hide(),将class属性值为inContent的第一个元素设置为显示,兄弟元素隐藏。5.$("#title li").click(function(){}),为相应的li元素注册click事件处理函数。6.$(this).addClass("new").removeClass("old").siblings().addClass("old").removeClass("new"),如果点击顶部的li元素的话,会为当前li元素添加名为new的class类,然后删除名为old的class类,然后将其他兄弟元素添加名为old的class类,删除名为new的class类。7.$(".info").hide().eq($("#title li").index(this)).show(),首先将class名为info的元素隐藏,然后将对应索引的元素显示。8.$(".info div:first-child").show().siblings().hide(),将info下面的div元素下的第一个子元素设置为显示,其他的元素隐藏。

标签: jquery可以实现哪些效果

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

上一篇:基于jquery实现动态竖向柱状条特效(jquery动态)

下一篇:jQuery插件支持同一页面被多次调用(jquery.js插件)

  • 发票跨季度可以用吗
  • 转出未交增值税年末怎么转平
  • 100万劳务费发票多少税
  • 业务活动费用和行政支出
  • 民间非营利组织会计制度最新版
  • 天猫费率是什么
  • 失业稳岗补贴要交所得税吗
  • 符合营改增应税服务规定的有
  • 多交税费退税会计处理
  • 个人所得税企事业单位承包经营所得
  • 美国边境管理体制
  • 如何理解结转资金与结余资金的区别
  • 仓储费怎么账务处理
  • 费用报销审批单填写样本图片
  • 专利代理服务费入账
  • ipad常用语在哪里
  • 腾讯手游助手qq版本过低
  • 职工教育经费的扣除限额
  • 苹果电脑如何提高网速
  • 社保会计分录怎么写
  • 设备安装服务几个点
  • 修改php.ini
  • win10无法运行软件怎么回事
  • 笔记本电池的正负极区分
  • uni-app实战教程
  • 其他业务收入产品包括
  • 短期投资的入账金额包括已宣告未发放的现金股利
  • 损益类账户的期末余额一般在借方还是贷方
  • 基于yolov5的目标检测实验任务
  • thinkphp3.x中session方法的用法分析
  • php安装oci8
  • 浅谈php的数据库管理系统
  • nvm安装教程
  • Cookie和Session的区别,各自的使用方法及常用操作
  • etc充值卡发票可以入账吗
  • 不动产物权归属和内容的根据是什么?
  • db2udb
  • 帝国cms到底好不好
  • 无产权证房屋转让需要公证吗
  • 小规模小于30万之前计提的税金及附加税
  • 高新企业申请流程
  • db2导出数据到excel
  • 以摊余成本计量的债权投资与以公允价值计量且其变动
  • 计入职工福利费的房租折旧属于人工成本吗
  • 管理费用是怎么计算的
  • 以非现金偿还债务的情形
  • 结构性存款现金流量折现法
  • 事业单位结余是什么意思
  • 公司股权作价转让会计分录案例
  • 实缴出资未注明投资款
  • 设备租赁公司如何赚钱最快
  • 公司支付给实习生的报酬如何税前扣除?
  • 主营业务收入和营业外收入的区别
  • 小企业会计准则调整以前年度费用分录
  • 工业企业低值易耗品二级科目
  • 这么查看
  • Windows设置启动引导
  • debian系统如何安装软件
  • 看linux系统
  • win7怎么关闭自带键盘
  • win10电脑无法上网
  • msworks.exe - msworks是什么进程 有什么用
  • windows操作大全
  • javascriptcsdn
  • ExtJS 2.0实用简明教程 之获得ExtJS
  • ftp自动上传文件怎么关闭
  • Vuforia ImageTarget Native版本编译
  • unity shader lod
  • node.js用途
  • Unity MeshBaker 合并网格和材质
  • 调试动态加载的js
  • 很全面的成语
  • JavaScript Break 和 Continue区别教程
  • 安卓自动登录脚本
  • js数组的push方法
  • 税务ukey怎么升级不了
  • 白盘怎么开具红字专用发票
  • 变更法人需要法人本人去吗
  • 国税发票如何查询真伪
  • 2021年水资源税征期
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设