html css js 手机底部切换

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_41229582/article/details/88121710

HTML部分:

    <div class="footerwrap">
    <div class="footer">
        <ul class="clearfix">
            <li class="Imgbox" img="[!--news.url--]skin/phone/img/shouye/cpjs.png" data-img="[!--news.url--]skin/phone/img/shouye/cpjs_1.png">
                <a href="[!--news.url--]xkc/">
                    <img src="[!--news.url--]skin/phone/img/shouye/cpjs.png" />
                    <p>产品介绍</p>
                </a>
            </li>
            <li class="Imgbox" img="[!--news.url--]skin/phone/img/shouye/often.png" data-img="[!--news.url--]skin/phone/img/shouye/often1.png">
                <a href="[!--news.url--]changjianwenti/">
                    <img src="[!--news.url--]skin/phone/img/shouye/often.png" />
                    <p>常见问题</p>
                </a>
            </li>
            <li class="Imgbox" img="[!--news.url--]skin/phone/img/shouye/sousuo.png" data-img="[!--news.url--]skin/phone/img/shouye/sousuo1.png">
                <a rel="external nofollow" href="[!--news.url--]seek/">
                    <img src="[!--news.url--]skin/phone/img/shouye/sousuo.png" />
                    <p>搜索</p>
                </a>
            </li>
            <li class="Imgbox" img="[!--news.url--]skin/phone/img/shouye/fangwei.png" data-img="[!--news.url--]skin/phone/img/shouye/fangwei1.png">
                <a rel="external nofollow" href="[!--news.url--]fangweichaxun/">
                    <img src="[!--news.url--]skin/phone/img/shouye/fangwei.png" />
                    <p>防伪查询</p>
                </a>
            </li>
            <li class="Imgbox" img="[!--news.url--]skin/phone/img/shouye/shop.png" data-img="[!--news.url--]skin/phone/img/shouye/shop1.png">
                <a href="[!--news.url--]goumai/">
                    <img src="[!--news.url--]skin/phone/img/shouye/shop.png" />
                    <p>在线购买</p>
                </a>
            </li>
        </ul>
    </div>
</div>

css部分:

    <div class="footerwrap">
    <div class="footer">
        <ul class="clearfix">
            <li class="Imgbox" img="[!--news.url--]skin/phone/img/shouye/cpjs.png" data-img="[!--news.url--]skin/phone/img/shouye/cpjs_1.png">
                <a href="[!--news.url--]xkc/">
                    <img src="[!--news.url--]skin/phone/img/shouye/cpjs.png" />
                    <p>产品介绍</p>
                </a>
            </li>
            <li class="Imgbox" img="[!--news.url--]skin/phone/img/shouye/often.png" data-img="[!--news.url--]skin/phone/img/shouye/often1.png">
                <a href="[!--news.url--]changjianwenti/">
                    <img src="[!--news.url--]skin/phone/img/shouye/often.png" />
                    <p>常见问题</p>
                </a>
            </li>
            <li class="Imgbox" img="[!--news.url--]skin/phone/img/shouye/sousuo.png" data-img="[!--news.url--]skin/phone/img/shouye/sousuo1.png">
                <a rel="external nofollow" href="[!--news.url--]seek/">
                    <img src="[!--news.url--]skin/phone/img/shouye/sousuo.png" />
                    <p>搜索</p>
                </a>
            </li>
            <li class="Imgbox" img="[!--news.url--]skin/phone/img/shouye/fangwei.png" data-img="[!--news.url--]skin/phone/img/shouye/fangwei1.png">
                <a rel="external nofollow" href="[!--news.url--]fangweichaxun/">
                    <img src="[!--news.url--]skin/phone/img/shouye/fangwei.png" />
                    <p>防伪查询</p>
                </a>
            </li>
            <li class="Imgbox" img="[!--news.url--]skin/phone/img/shouye/shop.png" data-img="[!--news.url--]skin/phone/img/shouye/shop1.png">
                <a href="[!--news.url--]goumai/">
                    <img src="[!--news.url--]skin/phone/img/shouye/shop.png" />
                    <p>在线购买</p>
                </a>
            </li>
        </ul>
    </div>
</div>

js(jq)部分:

        $(document).ready(function(){ 
      
        $(".footer li").each(function(){ 
        if($(this).find('a')[0].href==String(window.location)){ 
            $(this).find("p").addClass('actives');
            $(this).siblings("a").find("p").removeClass('actives');
            var click = $(this).data('img');
            $(this).find('img').attr('src', click);
            $(this).siblings('.Imgbox').each(function() {
            var noclick = $(this).attr('img');
            $(this).find('img').attr('src', noclick);
            })
        } 
      });          
    });