您的位置：首页 > Web前端 > JQuery

JQuery 实例：标签切换

2017-12-19 16:43 351 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航