jQuery添加class样式，移除同胞的class样式

实现效果：点击模块为当前元素添加class，同时移除其他三个元素的class

$('#headnav li').click(function() {

$(this).addClass('current-menu').siblings().removeClass('current-menu');

})

}

即给id为headnav下的li添加click点击事件，当点击这个元素时添加提前写好的class样式current-menu，siblings是获取其他同胞然后移除他们的class

class为current-menu显示的效果是改变背景色以及宽度，如下为完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery添加class</title>
</head>
<style>
.headnav .current-menu a{width: 120px;background-color: #62d2f9;}
</style>
<body><!--head star--><div class="enter_head clearfix"><div class="head_logo left"><img src=""><h3>jQuery添加class</h3></div><ul class="headnav left" id="headnav"><li id="menu_0"  class="current-menu"><a href="#">菜单管理</a></li><li id="menu_1"><a href="#">模块管理</a></li><li id="menu_2"><a href="#">系统设置</a></li><li id="menu_3"><a href="#">扩展管理</a></li></ul></div><!--head end--><script type="text/javascript" src="script/bootstrap/jquery-3.2.1.min.js"></script><script type="text/javascript">$(document).ready(function(){$('#headnav li').click(function() {$(this).addClass('current-menu').siblings().removeClass('current-menu');})})</script>
</body>
</html>

jQuery添加class样式，移除同胞的class样式相关推荐

JS/jQuery添加和移除CSS样式
有时候需要添加CSS样式和移除CSS样式,如添加display属性,设为隐藏.有时候需要移除display属性. 一.jQuery移除CSS样式的两种方法注意:当其中一种不支持时,就尝试另一种: $ ...
jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
php+jq+添加css,jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
html移除属性 jquery,Jquery添加删除属性、添加类
Document .red{ color: red; } .box3{ width: 100px; height: 100px; background: red; } addClass() 添加类名 ...
Jquery - 添加属性、添加class、添加Css
Jquery - 添加属性.添加class.添加Css 一.设置属性: 方式一 jQuery 代码: $("img").attr({ src: "test.jpg&qu ...
给Jquery添加alert,prompt方法，类似系统的Alert，Prompt，可以响应键盘，支持拖动...
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容 ...
吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：移除默认的列表样式
<!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...
jQuery添加、删除元素
jQuery添加元素: prepend()在头部添加,添加的内容在被选标签的内部 append()在尾部添加,添加的内容在被选标签的内部 before()在头部天际,添加的内容在被选标签的外部 aft ...
JQuery 添加动态元素JS或CSS无效
1.动态添加的元素无法绑定事件平时写前端页面,经常用到模板引擎,或者是后期通过json动态生成的元素需要绑定各种事件,但是怎么调用都调用不到,是因为,页面加载的时候,你的js已经执行完了,但是元素还 ...

jQuery添加class样式，移除同胞的class样式

jQuery添加class样式，移除同胞的class样式相关推荐

最新文章

热门文章