1、知识点
css:浮动、清除浮动
jQuery:选择器(选己排他)、链式调用
ajax
效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.container {
margin: 200px auto;
width: 400px;
height: 400px;
background-color: gray;
}
.container ul li {
list-style: none;
line-height: 30px;
float: left;
border: 1px solid yellow;
width: 78px;
}
.sel {
background-color: #5CADFF;
}
.container .con {
width: 400px;
height: 300px;
}
.one {
background-color: red;
}
.two {
background-color: yellow;
}
.three {
background-color: green;
}
.four {
background-color: pink;
}
.five {
background-color: blue;
}
/*开启haslayout*/
.clearfix {
*zoom: 1;
}
/*ie 6 7 不支持伪元素*/
.clearfix:after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="nav clearfix">
<ul>
<!--<li class="sel" ajax="true" url="data1.html">111111</li>-->
<li class="sel" ajax="true" url="data.html">111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
<li>555555</li>
</ul>
</div>
<div class="con one"></div>
<div class="con two"></div>
<div class="con three"></div>
<div class="con four"></div>
<div class="con five"></div>
</div>
<script>
$(function () {
$(".nav").find("li").hover(function () {
$(this).addClass("sel").siblings().removeClass()
//获取当前元素索引
var $index = $(this).index()
$(".con").hide().eq($index).show()
var $con = $(".con").eq($index)
var $ajax = $(this).attr("ajax")
var $url = $(this).attr("url")
// alert($ajax+"==========="+$url)
if ($ajax) {
//确认是ajax请求
//ajax填充内容区域
$.ajax({
type: "post",
url: $url,
beforeSend: function () {
//url错误,获取不到资源数据的时候
$con.html("加载中...")
},
success: function (data) {
$con.html(data)
}
})
}
})
})
</script>
</body>
</html>
参考:
http://bijian1013.iteye.com/blog/2038254