一、效果图
二、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"); }
原文出处