按钮样式动态切换js

在实际项目中，前端终会遇到很多按钮，然后根据的ui设计实现功能，现在我就在这里记录一下简单的按钮动态切换

第一种：前端写死的导航分类类别

 <!--菜单导航--><div style="width:100%;display: flex;justify-content: space-around;position: absolute;top:50px"><div></div><div class="nav nav-active" >首页</div><div class="nav">箱包</div><div class="nav">面膜</div><div class="nav">护肤</div><div class="nav">时尚</div><div class="nav">奢侈</div><div class="nav">其他</div></div>js:
//导航菜单样式切换
$('.nav').click(function () {$(this).siblings().removeClass('nav-active'); //点击时需要的样式$(this).addClass('nav-active');
})

第二种：由后台返回分类类别

function selectSpecGroup(k,) { //点击事件for (let j = 0; j < goodsStockList.length; j++) {  //设置为全局的data，后台返回的数据$("#button" + j).removeClass("specGroupActive")}$("#button"+k).addClass("specGroupActive")
}

  初始化时
$('.nav-item').click(function () {$(this).siblings().removeClass('nav-item-click'); //点击时需要的样式$(this).addClass('nav-item-click');})

按钮样式动态切换js相关推荐

开发工具与关键技术：使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换
开发工具与关键技术: HTML CSS3 JQUERY JS 作者:冉启东撰写时间:2019年1月18日 1.使用HTML制作Contextual variations各种颜色类型的徽章代码如下: ...
ECharts实现动态切换主题样式
ECharts是百度开源的一个JS数据可视化库.通过颜色主题可以轻松实现不同颜色样式的修改,也可以通过调色盘.直接样式设置.高亮样式等方法实现. ECharts4 开始,除了一贯的默认主题外,新内置了 ...
R语言plotly包可视化线图（line plot）、使用restyle参数自定义设置可视化结果中线条的颜色、使用按钮动态切换线条的颜色(change line color with button)
R语言plotly包可视化线图(line plot).使用restyle参数自定义设置可视化结果中线条的颜色.使用按钮动态切换线条的颜色(change line color with button i ...
aswing学习笔记4-通过调用面板中的按钮实现主界面动态切换皮肤的问题！
通过调用面板中的按钮实现主界面动态切换皮肤的问题! 发表于 : 周三 10月 29, 2008 2:09 pm 由 xueyuan cyz 现在我在做一个动态切换皮肤的的功能,原理是通过点击调用面板 ...
用 JS 点击左右按钮使图片切换 - 最精简版-ljx2380000-ChinaUnix博客
用 JS 点击左右按钮使图片切换 - 最精简版-ljx2380000-ChinaUnix博客代码部分: 点击(此处)折叠或打开 <!DOCTYPE html PUBLIC "-// ...
WPF 动态切换按钮图片
WPF动态切换按钮图片就是在鼠标移上去的时候显示另一张图片首先先把三张图片放上去第一张第二张第三张然后给他们一个值,鼠标移上去的时候是true,显示图片,鼠标移开的时候显示false不显示图 ...
js实现点击按钮图片自动切换_☆往事随風☆的博客
文章目录前言一.基本思路二.代码分析 1.创建数组保存图片的存储路径 2.获取按钮对象 3.调用定时器 4.关闭定时器三.整体代码四.效果展示前言利用js实现一个图片自动切换的功能. 一 ...
bootstrap动态切换导航按钮的active属性就实现
在网上找了半天怎么动态切换导航,偶然发现bootstrap实现方法,bootstrap框架真的很强大,直接用能省不少时间,菜鸟教程很不错,在上面找到点击打开链接 <!DOCTYPE html&g ...
vue两个按钮切换_在vue中实现多个按钮样式的点击切换？
1.在vue中实现多个按钮样式的点击切换?有多个按钮,点击其中一个出现下划线,而另一个回到原始状态. 点击其中一个两个同时出现下划线样式: 再次点击两个都还原成最初的样式,即有下划线: 如何实现只有被 ...
js吧html中的图片改为数组图片,巧用数组制作图片切换js代码
巧用数组制作图片切换js代码发布于 2017-07-05 07:15:55 | 104 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Javascript 是一种由 ...

按钮样式动态切换js

按钮样式动态切换js相关推荐

最新文章

热门文章