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