<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>标签切换</title>
<style>
.title {
width:100px; height:25px; border:1px solid red;
margin:3px;
float:left;
}
.content {
width:430px; height:300px; border:1px solid blue;
clear:both;
}
</style>
<script src="scripts/jquery-1.7.1.min.js"></script>
<script>
$(function() {
var divContent = $('.content');
$(".title").mouseover(function(){
switch (this.id)
{
case "0":
divContent.html('<h1>西安,泉州,丝绸之路</h1>');
break;
case "1":
divContent.html('<h1>互联网++</h1>');
break;
case "2":
divContent.html('<h1>配置实体</h1>');
break;
case "3":
divContent.html('<h1>天行山</h1>');
break;
}
});
});
</script>
</head>
<body>
<div class="title" id="0">一带一路</div>
<div class="title" id="1">互联网+</div>
<div class="title" id="2">亚投行</div>
<div class="title" id="3">京津冀</div>
<div class="content"></div>
</body>
</html>