jQuery实现简单标签效果
作者:
幻凌风 | 来源:发表于
2017-08-22 20:26 被阅读9次
标签.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.title{
width:100px;
height:30px;
border:2px solid red;
float:left;
margin:5px;
}
.content{
width:500px;
height:200px;
border:1px solid blue;
clear:both;
}
</style>
<script src="script/jquery-3.2.1.js"></script>
<script>
$(function () {
$(".title").mouseover(function () {
var divContent = $(".content");
switch (parseInt(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;
}
}).css("cursor", "pointer");
});
</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实现简单标签效果
本文链接：https://www.haomeiwen.com/subject/icfrdxtx.html
网友评论