位置: 编程技术 - 正文

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插件)

  • 拍卖公司没开发票违法吗
  • 发票专用章号码是老号码还能用吗
  • 异地提供建筑服务
  • 销售成本是负债吗
  • 个体每月开票超10万
  • 企业所得税汇算清缴申报表
  • 土地增值税可扣除的税金有哪些
  • 固定资产改变用途进项转出
  • 结构性存款质押 叫停
  • 其他货币资金是资产类科目吗
  • 企业微信收款如何同步给别人
  • 研发支出是什么性质的科目
  • 企业安装监控费用怎么做账
  • 企业所得税汇算清缴退税账务处理
  • 所得税季度申报表营业成本怎么填
  • 商品房房产税征收标准
  • 跨行发报
  • 个人住房交易50万元
  • 上年度退回来的所得税,怎么做分录
  • 个体户财务章必须刻吗
  • 城市维护建设税属于什么税种
  • 资产减值损失怎么计提
  • 材料采购费用的是
  • php parse_url
  • pqv2isvc.exe - pqv2isvc是什么进程 有什么作用
  • 如何在mac上快速打开聚焦搜索
  • 苹果7旧换新
  • 将自产的应税消费品用于非应税项目
  • linux怎么用gcc编译c程序
  • 前端页面出现乱码
  • css合并为单一边框
  • 房产自用或出租什么意思
  • 绿化费会计科目
  • 最薄的电视机是多厚
  • node.js最新版本
  • 企业短期借款的债权人均为银行
  • 企业接受现金捐赠如何开具发票
  • 税后现金流入
  • Javan tree frogs sitting together on a stalk in Indonesia (© SnapRapid/Offset by Shutterstock)
  • yii框架教程
  • 要点初见:Stable Diffusion NovelAI模型优质文字Tag汇总与实践【魔咒汇总】
  • 森林中的结香花,日本 (© nattya3714/Getty Images)
  • 员工借款能直接从公司账上转么
  • rest for api
  • php自动部署
  • yolov2模型
  • 用chatgpt写insar地质灾害的论文,重复率只有1.8%,chatgpt4.0写论文不是梦
  • 微软回应
  • 其他应收款坏账处理
  • 织梦面包屑导航最后的分隔符大于号去掉方法
  • 收到红字发票如何入账
  • 支票的法人章盖倒了了可以吗
  • 销售车位应怎么交税
  • 账务核对的主要内容
  • 购买员工团体意外险条款
  • 医院绿化方案
  • 去年亏损今年盈利能分红吗
  • 企业取得土地补偿款
  • 运输途中丢失的物品赔偿
  • 小规模纳税人退税政策
  • 公司向个人借款的会计分录怎么做
  • 新企业如何建帐
  • SQL语句查询数据量
  • sqlserver函数大全
  • 发生意外错误无法完成您的请求
  • centos中如何查看ip地址
  • win7系统360浏览器自启动怎么关闭
  • linux rpm包安装
  • 苹果电脑怎么关掉已经打开的页面
  • linux收发邮件
  • nodejs文件操作
  • gridview用法
  • bootstrap-
  • Unite Beijing 2015大型活动
  • unity的spine动画切换
  • jquery网页
  • 国家企业税务总局
  • 一般纳税人开租赁费发票税率是多少
  • 政府收储土地需要缴纳什么税
  • 高新企业公布
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设