JQuery 实例：标签切换

最新推荐文章于 2022-10-02 14:55:22 发布

houyanhua1

最新推荐文章于 2022-10-02 14:55:22 发布

阅读量212

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/houyanhua1/article/details/78844449

版权

JQuery 专栏收录该内容

57 篇文章 0 订阅

订阅专栏

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

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery 实例：标签切换

标签切换 .title { width:100px; height:25px; border:1px solid red; margin:3px; float:left; } .content { width:430px; height:300px; border:1px solid blue; clear:both; }
复制链接

扫一扫

专栏目录