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"); }
原文出处