点击切换图片的底部导航

随着H5的兴起，APP风格的页面成了切页面的日常，写底部导航时，在网上找的没有找到合适的，就自己试着用jQuery实现了一下，希望能有帮助

UI给的切图是这样的，不得不说，很贴心，哈哈哈哈。
这里写图片描述

实现结果是这样的：
这里写图片描述

三个tab是一样的，所以这里可以用事件代理，点击事件的添加，有关事件代理的详细信息看这里：https://www.cnblogs.com/liugang-vip/p/5616484.html。
大致思路是每次触发点击事件的时候，把所有的tab图片换成未触发状态，然后把当前点击的节点图片替换成触发状态，点击事件结束。
但是怎么替换图片呢？
：这里我们可以看一下图片一，如果把触发状态图片和未触发状态图片的名字，取相同的地方和不同的地方划分成两部分，图片是根据路径及图片名字显示的，通过修改图片后一部分的内容，也就实现了图片的切换。那么我们是不是可以通过修改路径名，来实现图片的替换？当然是可以的，因为我试过了，哈哈哈哈哈哈哈
下面是实现代码(用了jQuery，所以一定记得添加到文件里或者引入<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>)：
JS代码：


$('#bottom').click(function(event) {
                if(event.target.tagName === 'IMG'){
                var nodes = $('#bottom li img');
                for(var i=0; i<nodes.length; i++){
                    nodes[i].src = nodes[i].src.replace(/.png|_selected.png/,'.png');
                }
                event.target.src = event.target.src.replace(/.png|_selected.png/,'_selected.png');
            }}
            )

html代码

    <article>
        <!--底部tab切换栏-->
        <ul class="bottom" id="bottom">
            <li>
                <img src="../images/AC/verify_tabicon_01_selected.png"/></br>
                <span>工作信息</span>
            </li>
            <li>
                <img src="../images/AC/verify_tabicon_02.png" /></br>
                <span>支付宝</span>
            </li>
            <li>
                <img src="../images/AC/verify_tabicon_03.png" /></br>
                <span>更多信息</span>
            </li>
        </ul>
        </article>

CSS代码

body{
            background-color: #EFEFEF;
            margin: 0;
            padding: 0;
        }
        ul,ul li{
            margin:0;
            padding: 0;
        }
        article .bottom{
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: white;
            overflow: hidden;
        }
        article .bottom li{
            /*display: inline-block;*/
            float: left;
            text-align: center;
            width: 33%;
            padding-top: 0.1rem;
            font-size: 0.26rem;
            list-style: none;
        }

        article .bottom li img{
            width: 0.6rem;
            display: inline-block;
            margin-bottom: 0.1rem;
        }

其它内容（为了能在手机端比较优秀的显示出来，我们还需要在<head></head>添加一下额外内容，有兴趣的可以看一下）

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script type="text/javascript" src="../js/jquery.min.js" ></script>
        <title>卖了换钱</title>
        <script type="text/javascript">
            ! function() {
                var htmlEl = document.getElementsByTagName('html')[0];
                var fitPage = function() {
                    /* The calculate of with from zepto  */
                    var w = htmlEl.getBoundingClientRect().width;
                    w = Math.round(w);
                    w = w > 750 ? 750 : w;
                    var newW = w / 750 * 100;
                    htmlEl.style.fontSize = newW + 'px';
                }
                fitPage();
                var t;
                var func = function() {
                    clearTimeout(t);
                    t = setTimeout(fitPage, 25);
                }
                window.addEventListener('resize', func);
            }();
        </script>
    </head>

点击切换图片的底部导航

点击切换图片的底部导航

猜你喜欢