jQuery切换标签选中样式的简洁写法【实例】
2017-08-01 11:46
330 查看
相信很多人在写‘切换标签选中样式’这块功能的时候,不是一开始就能想到很简洁的写法吧,我是写php的,但是很多时候也需要自己写前端jQuery,现在想想,当时真是写的五花八门,乱七八糟。
现在介绍一个简洁易懂的写法:
//css样式
//html样式
//jQuery代码:
效果图:
如果大家有更简洁好用的写法,请留言交流学习。谢谢!
现在介绍一个简洁易懂的写法:
//css样式
.li_ys li{ display:inline-block; float:left; text-align:center; line-height:30px; font-size:1em; font-weight:bold; color:blue; width:100px; height:30px; overflow:hidden; border:1px solid red; margin-left:5px; margin-top:2px; } .active{ background:orange; }
//html样式
<ul class="li_ys"> <li>语文</li> <li>数学</li> <li>外语</li> </ul>
//jQuery代码:
//切换标签选中样式 $('ul.li_ys li').click(function(){ $(this).addClass('active').siblings().removeClass('active'); })
效果图:
如果大家有更简洁好用的写法,请留言交流学习。谢谢!
相关文章推荐
- Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
- jQuery全选、全不选、反选的简洁写法【实例】
- 2014.6.6 jquery 点击选中/取消 prop | Bootstrap 基于标签的导航实例
- 简洁快速的jQuery版Tab标签切换
- jquery切换标签时的样式的变换
- JQuery 实例:标签切换
- 实例:jQuery实现标签切换
- Jquery 设置 添加 删除 切换 样式
- js实例,获取选中select标签的value和option text值
- Bootstrap 标签的变体 实例样式
- JQuery在两个或者多个不同样式Calss之间切换
- [jquery实例] 每隔一段时间自动更换样式
- jQuery版Tab标签切换
- js实现点击切换TAB标签实例
- jQuery+css实现的tab切换标签(兼容各浏览器)
- select标签,不需要javascript,jquery等控件,自身多项选中简单代码
- jquery中,radio与select及checkBox标签选中及未选中和获取值得方法
- 几行简单的jQuery代码搞定tab标签切换效果
- jQuery使用之设置元素样式用法实例
- jQuery实现tab标签自动切换的方法