찾다

 >  Q&A  >  본문

javascript - 点击span实现样式变化!求大神帮忙

1.点击span 使span的class属性发生变化
class="btn btn-large btn-primary"------ btn-primary这是引入样式

2.原代码

    <p 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>
    </p>

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");
        })
    
}); 
阿神阿神2813일 전1081

모든 응답(4)나는 대답할 것이다

  • PHP中文网

    PHP中文网2017-04-11 13:22:50

    <p 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>
    </p>
    <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标签加

    회신하다
    0
  • 阿神

    阿神2017-04-11 13:22:50

    html

    <span class="span11">span1</span>
    
    <span class="span22">span</span>
    

    js

    $('span').on('click',function(){
        $(this).addClass('test');
    })
    

    css

    .span11{
      color:red;
    }
    
    .span22{
      color:blue;
    }
    
    .test{
      color:yellow;
    }
    

    demo: https://jsfiddle.net/jasonHsi...
    備註: 我用jquery2.2.4

    회신하다
    0
  • 天蓬老师

    天蓬老师2017-04-11 13:22:50

    $("#listView span") 你确定这种写法能取到元素吗?

    회신하다
    0
  • 大家讲道理

    大家讲道理2017-04-11 13:22:50

    $("#listView span")得不到这个元素

            <span class="btn btn-large" ><i class="icon-list"></i></span></a> 

    $("#listView span")得不到这个元素

    회신하다
    0
  • 취소회신하다