目录

需求

想做一个类似于qq底部菜单的效果，点击颜色变化并加载相应的页面。

实现方法

很简单，主要分为三个部分的div（top,content,menu）。虽然很简单但也遇到了不少坑，这里简单总结下：

刚开始我将menu的position属性设置为absolute,然后将content内容填满并超过自身高度滚动后发现menu也跟着滚动了。（我既然这么说那肯定就是这个属性设置的有问题了）请教别人后才知道将position属性设置为fixed就能将menu的位置固定了。

于是就百度看了下两者的区别：

absolute:绝对的。相对应static定位以外的的第一个元素。
fixed:固定的。相对于浏览器定位。

具体实现

<!DOCTYPE html>
<meta name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>底部菜单实现点击切换页面</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 微软雅黑;
        }

        header {
            height: 60px;
            line-height: 60px;
            width: 100%;
            color: #fff;
            font-family: "黑体";
            font-weight: 200;
            font-size: 20px;
            /*背景色渐变*/
            background: linear-gradient(to bottom right, #F56739, #FB9749);
        }

        #content {
            background: linear-gradient(to bottom right, #f5f454, #fbd1b7);
        }

        .menu {
            display: block;
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 70px;
            color: #474747;
            padding-top: 10px;
            border-top: 1px solid #eee;
            background-color: #fff;
        }

        .subMenu {
            width: 33%;
            float: left;
            cursor: pointer;
        }

        .menu_name {
            height: 30px;
            width: 100%;
            line-height: 30px;
        }

        img.menu_img {
            height: 24px;
            width: 24px;
        }

        img {
            vertical-align: middle;
            border: 0;
        }

        .active {
            color: #FFA129;
        }

        .text-center {
            text-align: center
        }

    </style>
    <script src="../js/jquery-1.11.2.min.js"></script>
</head>
<body onload="initSize()" onresize="initSize()">
<!--top-->
<header class="text-center">TOP</header>
<!--content-->
<div id="content"></div>
<!--bottom-->
<div id="menu" class="menu">
    <div id="one" class="subMenu text-center" data-src="charger.html">
        <img class="menu_img" data-imgname="my"/>
        <div class="menu_name">测试1</div>
    </div>
    <div id="two" class="subMenu text-center">
        <img class="menu_img" data-imgname="QQ"/>
        <div class="menu_name">QQ</div>
    </div>
    <div id="three" class="subMenu text-center" data-src="personal.html">
        <img class="menu_img" data-imgname="my"/>
        <div class="menu_name">测试3</div>
    </div>
</div>

</body>
<script>
    //$(function () {});
    $(document).ready(function () {
        //添加图片
        $("div .subMenu>img").each(function () {
            var name = $(this).attr("data-imgname");
            var src = "../images/charge/" + name + ".png"
            //设置img的属性和值。
            $(this).attr("src", src);
        });

        //点击事件
        $("div .subMenu").click(function () {
            // 取消当前激活状态
            var $img = $(".active>img");
            //返回被选元素的属性值
            var name = $img.attr("data-imgname");
            var src = "../images/charge/" + name + ".png";
            $img.attr("src", src);
            $(".active").removeClass("active");

            // 添加新状态
            $(this).addClass("active");
            //找到所有 div(subMenu) 的子元素(img)
            $img = $(this).children("img");
            name = $img.attr("data-imgname");
            src = "../images/charge/" + name + "_active.png";
            //设置img的属性和值。
            $img.attr("src", src);

            //content根据点击按钮加载不同的html
            var page = $(this).attr("data-src");
            if(page){
                $("#content").load("../html/" + page)
            }
        });

        // 自动点击第一个菜单
        $("div .subMenu")[0].click();
    });

    /*content高度*/
    function initSize() {
        var height = $(window).height() - $("header").height() - $("#description").height() - $("#menu").height();
        $("#content").height(height + "px");
    }
</script>
</html>

演示图

底部菜单栏的实现