jquery点击div更换class
js部分改怎么处理,把class “label label-success”更换一个其他的
function ajaxOpen(aid,field,value){
} 展开
2016-08-11 · 百度知道合伙人官方认证企业
addClass、removeClass、toggleClass
addClass
描述: 为每个匹配的元素添加指定的样式类名
$('div').addClass('className');//为所有div添加名为className的class
removeClass
描述: 移除集合中每个匹配元素上一个,多个或全部样式。
$('div').removeClass('className');//将所有div上名为className的class移除
toggleClass
描述: 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。
$('div').toggleClass('className');//如果div上有这个class就删除,没有就添加
(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>
(手写不易,望采纳!)
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')
$(function(){
$(".swiper-wrapper div").click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
});
});