0
我有多個html文檔，使用jQuery移動框架共享一個css樣式表（不是一個html中的多個頁面div部分）。 所有的html文檔都能單獨運行，但如果一個頁面從另一個頁面的鏈接打開，所有的腳本和樣式都不再適用。有什麼方法可以在每次鏈接時都刷新每個html頁面？我已嘗試data-ajax="false"和rel="external"在<a>標記中，但它們不起作用。您的幫助將不勝感激！jQuery手機鏈接多個html文檔
是，每個HTML在head標籤插件鏈接：
<link rel="stylesheet" href="style/custom.css">
<link rel="stylesheet" href="style/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(event){
//custom script in each html
});
而且HTMLS在其標籤與標籤鏈接：
<a href="page1.html">page 1</a>
<a href="page2.html">page 2</a>
<a href="page3.html">page 3</a>
的聯繫工作，但自定義樣式表和腳本不當一個新的html從前一頁打開時應用了。如果我在標籤中添加data-ajax =「false」或rel =「external」，則即使鏈接不再工作。
感謝您查看代碼！
PS。對不起，我不熟悉jsfiddle並將我的代碼複製爲兩個單獨的html文件。如果我先打開page2.html，滑塊工作正常。但是，如果我從page1.html的菜單中打開它，則滑塊不起作用。
這是page1.html：
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(event){
$(document).toggle(
function(){
$('.navigation').css("display", "block");},
function(){
$('.navigation').css("display", "none");
});
});
</script>
<style type="text/css">
.navigation{
position:fixed;
top:0;
left:0;
width:100%;
height:40px;
background:#cfcfcf;
display:none;
}
.menu{
float:left;
margin: 10px 20px;
text-decoration:none;
}
.main{
margin: 50px;
}
</style>
<body>
<div data-role="page">
<div id="page1">
<div class="navigation">
<a class="menu" href="page1.html">page 1</a>
<a class="menu" href="page2.html">page 2</a>
</div>
<p class="main"> this is page1 <br> click anywhere</p>
</div>
</div>
</body>
</html>
這是page2.html：
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(event){
$(document).toggle(
function(){
$('.navigation').css("display", "block");},
function(){
$('.navigation').css("display", "none");
});
$('.slider').change(function(){
var wid= $(this).val() + "px";
$('#box').css("width", wid);
});
});
</script>
<style type="text/css">
.navigation{
position:fixed;
top:0;
left:0;
width:100%;
height:40px;
background:#cfcfcf;
display:none;
}
.menu{
float:left;
margin: 10px 20px;
text-decoration:none;
}
.main{
margin: 50px;
}
#box{
width:10px;
height:30px;
margin: 0px 50px;
background:#000;
}
</style>
<body>
<div data-role="page">
<div id="page2">
<div class="navigation">
<a class="menu" href="page1.html">page 1</a>
<a class="menu" href="page2.html">page 2</a>
</div>
<p class="main"> this is page2 <br>adjust box width with slider </p>
<div id="box"></div>
<input type="range" class="slider" min="5" max="600" step="1" value="10"/>
</div>
</div>
</body>
</html>
你有沒有我們的任何代碼/例子/演示一下？沒有看到什麼是很難說出什麼問題的。 –
使用http://jsfiddle.net/顯示樣本 – Imdad
每個html文檔都有一個包含'css'和'script'標籤的'head'嗎？ – ahren