javascript - 点击span实现样式变化!求大神帮忙
本文介绍了javascript - 点击span实现样式变化!求大神帮忙的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
1.点击span 使span的class属性发生变化
class="btn btn-large btn-primary"------ btn-primary这是引入样式
2.原代码
<div id="myTab" class="pull-right">
<a href="#listView" data-toggle="tab">
<span class="btn btn-large" ><i class="icon-list"></i></span></a>
<a href="#blockView" data-toggle="tab">
<span class="btn btn-large btn-primary"><i class="icon-th-large"> </i></span></a>
</div>
3.目前写成这样就是不生效
<jsp:include page="/static/common/cart_js.jsp"/>
<script type="text/javascript">
$("span").each(function(i){
if(i==0){
$("#listView span").on("click",function(){
$(this).addClass("btn btn-large");
})
}else{
$("#blockView span").on("click",function(){
$(this).addClass("btn btn-large btn-primary");
})
}
});
</script>
4.网页效果图
求大神帮忙
以解决 代码如下
$("span").each(function(i){
$("#myTab span.btn").click(function(){
$("span").removeClass("btn-primary");
$(this).addClass("btn-primary");
})
});
解决方案
<div id="myTab" class="pull-right">
<a href="javascript:;" class="listView" data-toggle="tab">
<span class="btn btn-large" ><i class="icon-list"></i></span></a>
<a href="javascript:;" class="blockView" data-toggle="tab">
<span class="btn btn-large btn-primary"><i class="icon-th-large"> </i></span></a>
</div>
<script type="text/javascript">
$(function(){
$(".listView span").on("click",function(){
//console.log($(this));
$(this).addClass("btn btn-large");
});
$(".blockView span").on("click",function(){
$(this).addClass("btn btn-large btn-primary");
});
});
</script>
用class吧,给a标签加
这篇关于javascript - 点击span实现样式变化!求大神帮忙的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文