zoukankan html css js c++ java

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no"/>
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="renderer" content="webkit">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" >

</script>

<style>
.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:16px;
  margin-top:15px;
}

/*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>
<div style='height:2000px;'>
<h1>989898</h1>
<p>
1
1
1

1
1
1

</p>
  
  
</div>





<footer class="am-menu am-cf">
    <div class="am-menu-column index" id="index">
      <a href="#">
        <span>首页</span>
      </a>
    </div>
    <div class="am-menu-column explore" id="explore">
      <a href="#">
        <span>逛逛</span>
      </a>
    </div>
    <div class="am-menu-column life" id="life">
      <a href="#">
        <span>生活</span>
      </a>
    </div>
    <div class="am-menu-column my" id="my">
      <a href="#">
        <span>我的</span>
      </a>
    </div>
</footer>

</body>
</html>

查看全文

相关阅读:
Object.prototype.toString.call()进行类型判断
 JavaScript中的typeof操作符用法实例
 js ==与===区别（两个等号与三个等号）
js nextSibling属性和previousSibling属性概述及使用注意
 Java 缓存技术之 ehcache
不可不知 DDoS的攻击原理与防御方法
 jQuery的选择器中的通配符[id^='code']
jquery $("[id$='d']").val();这句话什么意思？
js 数组的操作
 【转】理解js中的原型链，prototype与__proto__的关系

原文地址：https://www.cnblogs.com/shaoing/p/7620105.html

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

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