400-800-9385
网站建设资讯详细

网站前端开发之Jq选项卡切换效果

发表日期:2021-05-09 12:20:29   作者来源:严成   浏览:1045   标签:网站前端开发    
在网页制作中,页面有些部分内容往往会有很多要展示,而为了页面美观或展示位置不够多,需要类似选项卡切换效果来展示更多的内容。
页面效果如图:

TAG切换1

点击切换后效果如图:

TAG切换2

html结构如图:

HTML代码1

css如图:

CSS代码2
CSS代码

js如图:

JS

demo引入了jQuery插件,选项卡切换只写了三个便于好理解,顶部的导航分类默认第一个选中效果(类名on),对应下面的内容块第一个(类名on),点击导航分类时,为当前点击的标签li添加默认的类名on(addClass),其余的同级标签li(siblings)删除类名on(removeClass),在获取当前点击的li标签的下标($(this).index()),通过下标值为三个内容块中对应的内容块添加类名on(addClass),其余的(siblings)删除类名on(removeClass)。
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6039.html
前端相关公司评论
  • 2.驻点数据软件工程师、前端工程师、后端工程师、云业务专员(技术类岗位聘用人员为公司正式职工):试用期2个月,试用期工资按照转正工资的80%发放(试用期即签订正式劳动合同,开始购买社会保险);...
    思茅开发网站公司
  • 为什么说学习前端知识很有必要呢?一般情况下,ui设计师负责设计页面,然后和前端对接,如果ui人员不了解前端基本知识,那沟通难度就会很大。另外,ui设计师了解前端知识,也可以独...
    遵义系统开发公司