如何用jquery实现点击div更换class？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用jquery实现点击div更换class？相关的知识，希望对你有一定的参考价值。
jQuery中使用attr('属性名')可以返回属性的值。
语法：$(selector).attr([attribute]); // 返回attr中指定的当前选择器的属性值；
例如：
$(selector).attr('id'); // 获取选择器的id
$(selector).attr('class'); // 获取选择器的class类名
实例：
1. 用jQuery获取div的class类名：
1234<div class="mystyle">我是div</div><script> $('div').attr('class'); // 得到“mystyle”</script>
2. 用jQuery获取当前点击的button的id：
123456<button id="btn" onclick="BtnClick(this)">按钮</button><script> function BtnClick(obj) $(obj).attr('id'); // 得到“btn” </script
可以采用如下思路：分别将两种背景图片设为两个类，然后使用toggleClass()方法切换类：
$(selector).toggleClass('class_a').toggleClass('class_
创建html代码：一个简单的div用于显示背景图片
<div class="test"></div>
设置css样式：分别为两个背景设计一个类
div.testwidth:264px;height:152px;margin:50px;border:4px dashed #ccc;
.bg1background:url('bg1.png');
.bg2background:url('bg2.png');
编写jquery代码：点击切换类实现背景的变换
$(function()
$("div.test").addClass('bg1'); // 初始化时添加背景1
$("div.test").click(function()
$(this).toggleClass('bg1').toggleClass('bg2')
(1)移除和添加样式分别是$("mydiv").removeClass("css1") 和$("mydiv").addClass("css1")
(2)如果是换了样式之后，想换回原来的样式，即是切换样式，那么就涉及到一个判断当前样式的问题，此时可以使用方法hasClass()，该方法是判断元素当前是否含有某样式。
(3)所以根据1、2可以实现一个点击切换样式的效果，示例代码如下：
<script type="text/javascript">
$("#mydiv").click(function ()
if ($(this).hasClass("css1"))
$(this).removeClass("css1")
$(this).addClass("css2")
else if ($(this).hasClass("css"))
$(this).removeClass("css2")
$(this).addClass("css1")
)
</script>
(手写不易，望采纳！)
如何用vuejs，点击div改变div的颜色
参考技术A html><head>
<title>Hover</title>
<style type="text/css">
*
padding: 0;
margin: 0;
font-size: 11pt;
div
float: left;
width: 100px;
margin-right: 20px;
padding: 5px;
border: 1px solid #999;本回答被提问者采纳
以上是关于如何用jquery实现点击div更换class？的主要内容，如果未能解决你的问题，请参考以下文章