【发布时间】：2012-05-31 04:30:46
【问题描述】：
我有多个 html 文档，它们共享一个 css 样式表（不是一个 html 中的多个页面 div 部分），用于使用 jQuery 移动框架的 Web 应用程序项目。
所有 html 文档单独工作都很好，但如果一个页面从另一个页面的链接打开，则所有脚本和样式都不再适用。有没有办法让每个 html 页面在链接时保持刷新？我在<a> 标签中尝试过data-ajax="false" 和rel="external"，但它们没有用。您的帮助将不胜感激！
是的，每个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
});
而 html 是通过其标签中的标签链接的：
<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>
【问题讨论】：
-
您有任何代码/示例/演示供我们查看吗？在没有看到任何东西的情况下很难说出问题所在。
-
使用jsfiddle.net 显示示例
-
每个 html 文档是否有一个
head包含您的css和script标签？ -
我在上面添加了更多代码描述。感谢收看。