一、效果图
二、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
转载于:https://www.cnblogs.com/ryelqy/p/10789469.html
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)