仿淘宝手机端底部菜单(菜单切换 页面跳转 图标变化)

小精豆2016
小精豆2016 发布于 2016-01-15 18:47:47 浏览:4334 类型:原创 - 教程 分类:JavaScript - jquery功能开发 二维码: 作者原创 版权保护
一个仿淘宝手机端底部导航菜单的代码,因为是纯静态页面写的,可能比较麻烦
仿淘宝手机端底部菜单(菜单切换 页面跳转 图标变化)仿淘宝手机端底部菜单(菜单切换 页面跳转 图标变化)
主要的功能点是判断当前超链接的地址和当前页面的地址是否一致,这里面也涉及到了相对路径和绝对路径 ,不足之处希望大家多多指正
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>购物车结算</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="renderer" content="webkit">
  <!--<![endif]-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <style>
  /*footer am-menu*/

.am-menu {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #efefef;
  text-align: center;
  height: 54px;
  overflow: hidden;
  z-index: 98;
  border-top: 1px solid #ddd;
}

.am-menu-column {
  width: 25%;
  float: left;
  font-size: 1.4rem;
}
.am-menu-column i {
  font-size: 2.2rem;
  height: 30px;
  display: block;
  overflow: hidden;
}
/*new footer*/
/*因为都是用的字体图标可能显示不出来,但是字体颜色会有变化*/
.index i:before {
  content: "\e602";
  color: #999;
}
.explore i:before {
  content: "\e607";
  color: #999;
}
.life i:before {
  content: "\e600";
  color: #999;
}
.my i:before {
  content: "\e605";
  color: #999;
}
.index-active i:after {
  content: "\e603";
  color: #32B5E5;
}
.explore-active i:after {
  content: "\e608";
  color: #32B5E5;
}
.life-active i:after {
  content: "\e601";
  color: #32B5E5;
}
.my-active i:after {
  content: "\e606";
  color: #32B5E5;
}
.index a span,
.explore a span,
.life a span,
.my a span {
  display: block;
  color: #999;
}
.index-active a span,
.explore-active a span,
.life-active a span,
.my-active a span {
  display: block;
  color: #32b4e5;
}
  </style>
  </head>
<body>
<footer class="am-menu am-cf">
    <div class="am-menu-column index" id="index">
      <a href="http://ec.i7i5.cn/">
        <i class="iconfont-x"></i>
        <span>首页</span>
      </a>
    </div>
    <div class="am-menu-column explore" id="explore">
      <a href="http://ec.i7i5.cn/Index/Index/explore">
        <i class="iconfont-x "></i>
        <span>逛逛</span>
      </a>
    </div>
    <div class="am-menu-column life" id="life">
      <a href="http://ec.i7i5.cn/Life">
        <i class="iconfont-x "></i>
        <span>生活</span>
      </a>
    </div>
    <div class="am-menu-column my" id="my">
      <a href="http://ec.i7i5.cn/User">
        <i class="iconfont-x "></i>
        <span>我的</span>
      </a>
    </div>
  </footer>
  <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
  <script>
$(".am-menu-column").each(function() { //迭代div
    var perch = $(this).attr("id"); //获取当前div的id
      if(perch == "index"){ //如果id是index
        if ($("#index").find("a").attr("href") == String(window.location)){   //这个地方也可以用window.location.pathname 那么超链接href的地址就可以改为/index了

//如果id=index下面的超链接路径和当前页面的路径一致  (window.location绝对路径)
//设置或获取对象指定的文件名或路径。
//window.location.pathname
//例:http://localhost:8086/topic/index?topicId=361
//alert(window.location.pathname); 则输出:/topic/index


          $("#index").removeClass("index"); //清除当前的灰色的图标class
          $("#index").addClass("index-active");//添加彩色的图标的class
        } else {
          $("#index").addClass("index"); // else添加彩色的图标的class
          $("#index").removeClass("index-active");// 清除当前的灰色的图标class
        }
      }else if(perch == "explore"){ //下面的同理
        if ($("#explore").find("a").attr("href") == String(window.location)){
          $("#explore").removeClass("explore");
          $("#explore").addClass("explore-active");
        } else {
          $("#explore").addClass("explore");
          $("#explore").removeClass("explore-active");
        }
      }else if(perch == "life"){
        if ($("#life").find("a").attr("href") == String(window.location)){
          $("#life").removeClass("life");
          $("#life").addClass("life-active");
        } else {
          $("#life").addClass("life");
          $("#life").removeClass("life-active");
        }
      }else if(perch == "my"){
        if ($("#my").find("a").attr("href") == String(window.location)){
          $("#my").removeClass("my");
          $("#my").addClass("my-active");
        } else {
          $("#my").addClass("my");
          $("#my").removeClass("my-active");
        }
      }   
  })

    </script>
</body>
</html>
z
给个赞 3 人点赞
收藏 1 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
小精豆2016 小精豆2016 作者

作者最新