html5手機web頁面底部菜單

一、效果圖

 

二、HTML代碼

    <header class="text-center">TOP</header>
    
    <div id="content"></div>
    
    <div id="menu" class="menu">
        <div id="one" class="subMenu text-center" data-src="">
            <img class="menu_img" data-imgname="1">
            <div class="menu_name">測試1</div>
        </div>
        <div id="two" class="subMenu text-center">
            <img class="menu_img" data-imgname="2">
            <div class="menu_name">QQ</div>
        </div>
        <div id="three" class="subMenu text-center" data-src="personal.html">
            <img class="menu_img" data-imgname="3">
            <div class="menu_name">測試3</div>
        </div>
        <div id="four" class="subMenu text-center" data-src="personal.html">
            <img class="menu_img" data-imgname="4">
            <div class="menu_name">測試4</div>
        </div>
        <div id="five" class="subMenu text-center" data-src="personal.html">
            <img class="menu_img" data-imgname="5">
            <div class="menu_name">測試5</div>
        </div>
    </div>

 

 

三、CSS代碼

        * {
            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: 20%;
            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
        }

　　

四、JS代碼

$(document).ready(function() {
    //添加圖片
    $("div .subMenu>img").each(function() {
        var name = $(this).attr("data-imgname");
        var src = "http://www.jq22.com/img/cs/500x300-" + name + ".png"
        //設置img的屬性和值。
        $(this).attr("src", src);
    });

    //點擊事件
    $("div .subMenu").click(function() {
        // 取消當前激活狀態
        var $img = $(".active>img");
        //返回被選元素的屬性值
        var name = $img.attr("data-imgname");
        var src = "http://www.jq22.com/img/cs/500x300-" + 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 = "http://www.jq22.com/img/cs/500x300-" + name + ".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");
}

 

 

原文出處

http://www.jq22.com/webqd3784