如何用jquery实现点击div更换class?

 我来答
张勇7025
推荐于2019-11-02 · TA获得超过5766个赞
知道小有建树答主
回答量:44
采纳率:100%
帮助的人:5257
展开全部

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.test{width:264px;height:152px;margin:50px;border:4px dashed #ccc;}
.bg1{background:url('bg1.png');}
.bg2{background:url('bg2.png');}

编写jquery代码:点击切换类实现背景的变换

$(function(){
$("div.test").addClass('bg1'); // 初始化时添加背景1
$("div.test").click(function() {
$(this).toggleClass('bg1').toggleClass('bg2')

热带鱼Baby1
2019-08-07 · 超过11用户采纳过TA的回答
知道答主
回答量:53
采纳率:0%
帮助的人:20.1万
展开全部
假设有div元素<div id="mydiv" class="css1">,和两个样式: .css1{} .css2{}
(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>
(手写不易,望采纳!)
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式