JQuery 实例：标签切换

来源：互联网发布：ubuntu pyqt5 编辑：程序博客网时间：2024/06/05 18:35

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

阅读全文

0 0