jQuery控制tab标签页
Tab标签
多个tab标签,选中状态通过JS修改class
先设置所有tabButtonStyle的class为tabButtonStyle,在给当前按钮添加激活样式
// tab激活
$('.tabButtonStyle').click(function () {var elems = document.getElementsByClassName("tabButtonStyle");for (var i = 0; i < elems.length; i++) {elems[i].setAttribute("class", "tabButtonStyle");}$(this).addClass("tabButtonActive");
});
Tab标签的内容,可以展开收起
直接控制页面元素显示与隐藏,没有动态效果
页面代码
<button class="flexibleStyle"><a class="flexibleControleStyle">展开</a><i id="searchIconStyle" class="icon-circle-arrow-up"></i>
</button>
JS代码
// 展开、收起
$('.flexibleStyle').click(function () {var text = document.getElementsByClassName("flexibleStyle")[0].children[0].text;if (text == "展开") {document.getElementsByClassName("flexibleStyle")[0].children[0].innerHTML = '收起';$(".icon-circle-arrow-up").attr("class", "icon-circle-arrow-down");$(".searchContentStyle").attr("style", "display:none;");} else {document.getElementsByClassName("flexibleStyle")[0].children[0].innerHTML = '展开';$(".icon-circle-arrow-down").attr("class", "icon-circle-arrow-up");$(".searchContentStyle").attr("style", "display:block;");}}
});
jQuery控制tab标签页相关推荐
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- html tab与jQuery,js与jquery分别实现tab标签页功能的方法
本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 *{margin: 0;padding: 0;} #myul li {li ...
- Vant Tab标签页+下拉刷新+上拉加载
Vant Tab标签页+下拉刷新+上拉加载 <template><div class="invoicePickupBox"><div class=&q ...
- 微信小程序|Tab标签页
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 欢迎加入团队圈子!与作者面对面!直接点击! 问题描述 在使用小 ...
- JavaScript面向对象—— 动态创建tab标签页
昨天呢,介绍了js中类的概念,以及使用类创建对象的过程.今天就用js中的类实现一个小的功能,动态添加.删除标签页.emmmmm,也有点像tab栏切换,不过比tab栏切换多了添加和删除的功能. 案例说明 ...
- vue实现多个tab标签页的切换与关闭
1.实现效果 2.实现原理 vuex,实现对当前激活项,当前tab列表,当前tab的translateX,当前缓存页,当前路由的状态管理. 将vuex中的数据保存到sessionStorage中,避免 ...
- 点击链接跳转到新页面并显示对应的tab标签页切换
原理:从页面A跳转到页面B,则在A页面中跳转页面时传值,然后在B页面中写js获取该值并做对应的操作 附:tab标签页的制作链接:https://mp.csdn.net/postedit/1010531 ...
- Vant Tab标签页
引入 import Vue from 'vue'; import { Tab, Tabs } from 'vant';Vue.use(Tab); Vue.use(Tabs); 代码演示 基础用法 通过 ...
- vue + element 中tab标签页拖拽(拖动) sortablejs插件实现
tab签拖拽更换位置 业务需求 效果图 1.npm安装sortable.js 2.html代码块 3. 在script下导入 4.js逻辑片段(**const el 必须找到自己拖拽的那一列** ) ...
最新文章
- 内网穿透工具nps和frp
- php中对于json_decode()和json_encode()的使用方法笔记
- js 复制 标签中的内容 方法
- pythontcp服务器教程_tcp服务端无线为多个客户端服务|python基础教程|python入门|python教程...
- 联想rd540服务器怎么装系统,联想RD540加显卡BIOS设置
- 51单片机的定时器深入讲解
- 引导界面图标好大_游戏里那些图标和界面,原来是这么设计出来的?
- Mono源代码学习笔记:Console类(五)
- Oracle SQL多表查询
- c++gdal如何在大图像中截取小图像并获取其图像信息_如何模拟不规则形状并构建几何模型
- 小草客户端android2.2.4 g,小草客户端android2.2.5-小草app安卓版客户端android2.2.5预约 v2.2.5-优盘手机站...
- 【流媒体开发】6、ffplay命令
- uniapp手写_uniapp 手写 Steps 步骤条
- 电力系统中的Kron简化,含MATLAB代码(全网唯一)
- input 搜索localStorage存储历史记录 删除历史记录
- 实现权重抽奖算法(java)
- java计算机毕业设计Web医学院校大学生就业信息管理系统源码+mysql数据库+系统+lw文档+部署
- html5测网速,ajax测网速(示例代码)
- 看看小编都用啥!实用Win7小软件大推荐
- 重金属深度处理,低浓度镍离子去除技术
热门文章
- 从浏览器地址栏输入网址,到网页彻底打开,中间都发生了什么?
- hihocoder-1615-矩阵游戏II
- oracle 显示格式化
- (学)新版动态表单研发,阶段成果----1
- Singleton Pattern(单例模式)
- linux ls错误,ls错误
- 图形基础 GPU架构(5)并行计算
- 《研磨设计模式》chap9 原型模式Prototype
- C++ Primer 5th笔记(chap 14 重载运算和类型转换)算术和关系运算符
- Linux shell/makefile/gic/python指令速查-inprocess