jquery Mobile入門(mén)—外部鏈接切換示例代碼

更新時(shí)間：2013年01月08日 10:54:57 作者：

內(nèi)部鏈接是通過(guò)在a標(biāo)簽內(nèi)將href屬性值設(shè)為#+id的形式，外鏈則是在a中增加rel屬性，并將屬性值設(shè)為external,感興趣的朋友可以了解下哦

1、內(nèi)部鏈接是通過(guò)在<a>標(biāo)簽內(nèi)將href屬性值設(shè)為#+id的形式，外鏈則是在<a>中增加rel屬性，并將屬性值設(shè)為external，如：<a href="about.html" rel="external">3i Studio</a>
2、外部鏈接切換示例代碼：

復(fù)制代碼代碼如下:

 
<!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>天氣預(yù)報(bào)</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 />晴轉(zhuǎn)多云<br />微風(fēng)</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代碼:

復(fù)制代碼代碼如下:

 
<!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>關(guān)于3I Studio</h1></header> 
<div data-role="content" class="content"> 
<p>3I Studio是一個(gè)致力于創(chuàng)業(yè)創(chuàng)新的技術(shù)團(tuán)隊(duì)</p>| 
</div> 
<footer data-role="footer"><h1>@2013 3i studio</h1></footer> 
</section> 
</BODY> 
</HTML> 

3、效果圖預(yù)覽：

點(diǎn)擊3i Studio進(jìn)行外部鏈接：

4、返回上一頁(yè)，則在<a>標(biāo)簽中添加data-rel屬性，并將屬性設(shè)為back,，如： <a data-rel="back">返回上一頁(yè)</a>

您可能感興趣的文章:

相關(guān)文章

jQuery判斷瀏覽器并動(dòng)態(tài)調(diào)整select寬度的方法
這篇文章主要介紹了jQuery判斷瀏覽器并動(dòng)態(tài)調(diào)整select寬度的方法,涉及jQuery針對(duì)瀏覽器的判定及頁(yè)面元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2016-03-03
jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法,涉及針對(duì)鼠標(biāo)事件的相應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)變換的相關(guān)操作技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下
2016-11-11
jQuery中replaceWith()方法用法實(shí)例
這篇文章主要介紹了jQuery中replaceWith()方法用法,以實(shí)例形式分析了replaceWith()方法用于匹配元素替換的技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
基于jquery中children()與find()的區(qū)別介紹
本篇文章介紹了，基于jquery中children()與find()的區(qū)別，需要的朋友參考下
2013-04-04
hover的用法及l(fā)ive的用法介紹(鼠標(biāo)懸停效果)
hover屬性在書(shū)寫(xiě)css時(shí)大家都不會(huì)陌生了吧live主要用于對(duì)動(dòng)態(tài)加載出來(lái)的元素綁定事件，下來(lái)將為大家詳細(xì)介紹下兩者的使用，感興趣的朋友可不要錯(cuò)過(guò)了哈
2013-03-03
關(guān)于jquery中全局函數(shù)each使用介紹
jquery 包含了兩個(gè) each 一個(gè)是 $().each 另一個(gè)是 $.each 區(qū)別就在于前一個(gè)是 jquery對(duì)象的內(nèi)置函數(shù) 而后一個(gè) 這是對(duì)象的遍歷函數(shù)
2013-12-12
jQuery 美元符沖突的解決方法
jQuery 美元符沖突的解決方法，使用jquery與別的js庫(kù)共同使用的時(shí)候需要注意的地方。
2010-03-03
jquery獲取文檔高度和窗口高度匯總
本文主要給大家匯總介紹了了jQuery獲取頁(yè)面及個(gè)元素高度、寬度的方法，非常的實(shí)用，有需要的小伙伴可以參考下。下面的例子是基于jquery的參數(shù)與方法來(lái)快速獲取文檔或?yàn)g覽器可視區(qū)域的高度與寬度的代碼,希望本例子能給你帶來(lái)一些幫助。
2016-01-01
jquery綁定事件不生效的解決方法
jquery綁定click事件，怎么都不生效，這個(gè)問(wèn)題很多朋友都有遇到過(guò)，下面為大家解決一下,需要的朋友可以參考下
2014-02-02
jQuery實(shí)現(xiàn)適用于移動(dòng)端的跑馬燈抽獎(jiǎng)特效示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)適用于移動(dòng)端的跑馬燈抽獎(jiǎng)特效,結(jié)合實(shí)例形式分析了jQuery結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)的跑馬燈抽獎(jiǎng)功能相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01