h5实现底部菜单选择切换页面及图片样式

最新推荐文章于 2025-07-10 15:32:21 发布

原创最新推荐文章于 2025-07-10 15:32:21 发布 · 2.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

js 同时被 2 个专栏收录

45 篇文章

订阅专栏

html

27 篇文章

订阅专栏

本文介绍了一种使用Aui框架实现的底部导航栏设计，详细展示了如何通过CSS和JavaScript来定制样式并根据页面URL自动激活相应的导航项。通过图片资源的动态加载和颜色变化，实现了美观且响应式的底部菜单。

该css使用Aui框架

footer.html

<style>
    #footer img{
        width: 2rem;
        height: 2rem;
        margin: 0 auto;
    }
    .aui-bar-tab-item a{color: #333;}
</style>
<footer class="aui-bar aui-bar-tab" rel="footer">      
    <div class="aui-bar-tab-item" rel="home.html" tapmode>
        <a href="home.html">
        <!-- <i class="aui-iconfont aui-icon-home"></i> -->
            <img src="../image/btmicon/home.png" alt="">
            <div class="aui-bar-tab-label">首页</div>
        </a>
    </div>
    <div class="aui-bar-tab-item" rel="mendian.html" tapmode>
        <a href="mendian.html">
            <img src="../image/btmicon/icon_cate.png" alt="">
            <!-- <i class="aui-iconfont aui-icon-star"></i> -->
            <div class="aui-bar-tab-label">附近门店</div>
        </a>
    </div>
    <div class="aui-bar-tab-item" rel="order.html" tapmode>
        <a href="order.html">
            <img src="../image/btmicon/icon_cart.png" alt="">
            <!-- <div class="aui-badge">99</div> -->
            <!-- <i class="aui-iconfont aui-icon-cart"></i> -->
            <div class="aui-bar-tab-label">订单</div>
        </a>
    </div>
    <div class="aui-bar-tab-item" rel="my.html" tapmode>
        <a href="my.html">
            <img src="../image/btmicon/icon_member.png" alt="">
            <!-- <div class="aui-dot"></div> -->
            <!-- <i class="aui-iconfont aui-icon-my"></i> -->
            <div class="aui-bar-tab-label">我的</div>
        </a>
    </div>
</footer>

<script>
    $(function(){
        var urlstr = location.href;　　　　//获取浏览器的url
         var urlstatus=false;　　
         $('.aui-bar-tab-item').each(function() {
           if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {
             //获取当前图片Url，进行拼接替换
              var img=$(this).find('img').attr('src');
              var a = img.lastIndexOf('.');
              var b = img.substr(0,a);
              var newImg = b+'_selected.png';
              $(this).find('img').attr('src',newImg);
              $(this).find('div').css('color','#03a9f4');
              urlstatus = true;
            }
          });
         if (!urlstatus) {
            $(this).removeClass('class','aui-active');
            $(".aui-bar-tab-item").eq(0).find('img').attr('src','../image/btmicon/home_selected.png'); //默认首页图标高亮
         }
    })
</script>