jquery Mobile入门―外部链接切换示例代码
发布时间:2020-12-14 22:24:09 所属栏目:资源 来源:网络整理
导读:1、内部链接是通过在a标签内将href属性值设为#+id的形式,外链则是在a中增加rel属性,并将属性值设为external,如:a href="about.html" rel="external"3i Studio/a 2、外部链接切换示例代码: 复制代码 代码如下: !DOCTYPE HTML !DOCTYPE HTML PUBLIC "-//W3
1、内部链接是通过在<a>标签内将href属性值设为#+id的形式,外链则是在<a>中增加rel属性,并将属性值设为external,如:<a href="about.html" rel="external">3i Studio</a> 2、外部链接切换示例代码: 复制代码 代码如下: <!DOCTYPE HTML > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta name="viewport" content="width=device-width,initial-scale=1"/> <link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/> <script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script> <script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> </HEAD> <BODY> <section id="page1" data-role="page"> <header data-role="header"><h1>天气预报</h1></header> <div data-role="content" class="content"> <p><a href="#w1">今天</a></p>| <p><a href="#">明天</a></p> </div> <footer data-role="footer"><h1>@2013 3i studio</h1></footer> </section> <section id="w1" data-role="page" data-add-back-btn="true"> <header data-role="header"><h1>今天天气</h1></header> <div data-role="content" class="content"> <p>4~7'C<br />晴转多云<br />微风</p> <em style="float:right;padding:5px"> <a href="about.html" rel="external">3i Studio</a>提供 </em> </div> <footer data-role="footer"><h1>@2013 3i studio</h1></footer> </section> </BODY> </HTML> 外部文件about.html代码: 复制代码 代码如下: <!DOCTYPE HTML > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta name="viewport" content="width=device-width,initial-scale=1"/> <link href="Css/jquery.mobile-1.2.0.min.css" rel="Stylesheet" type="text/css"/> <script src="Js/jquery-1.8.3.min.js" type"text/javascript"></script> <script src="Js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script> </HEAD> <BODY> <section id="page1" data-role="page" data-add-back-btn="true"> <header data-role="header"><h1>关于3I Studio</h1></header> <div data-role="content" class="content"> <p>3I Studio是一个致力于创业创新的技术团队</p>| </div> <footer data-role="footer"><h1>@2013 3i studio</h1></footer> </section> </BODY> </HTML> 3、效果图预览: 点击3i Studio进行外部链接: 4、返回上一页,则在<a>标签中添加data-rel属性,并将属性设为back,,如: <a data-rel="back">返回上一页</a> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- azure – 我们如何克服CNAME限制?
- html – ERROR errors.GrailsExceptionResolver – Concurr
- Azure Web服务无法连接到数据库
- jQuery实现图片放大预览实现原理及代码
- 模板 – Thymeleaf th:文本 – 放置文本而不删除HTML结构
- 打包工具的核心原理(转自:https://juejin.im/entry/5b223
- 由点击页面其它地方隐藏div所想到的jQuery的delegate
- 无边框和可调整大小的表单(C#)
- html – Microsoft Outlook中的中心div
- domain-name-system – bind9无法正确解析dnssec