0

我有多个 html 文档，它们共享一个 css 样式表（不是一个 html 中的多个页面 div 部分），用于使用 jQuery 移动框架的 Web 应用程序项目。所有 html 文档单独工作都很好，但如果一个页面从另一个页面的链接打开，则所有脚本和样式都不再适用。有没有办法让每个 html 页面在链接时保持刷新？我已经尝试过data-ajax="false"并rel="external"在<a>标签中，但他们没有工作。您的帮助将不胜感激！

是的，每个 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>
4

1 回答 1

0

把你的css和脚本放到每个页面的head标签上

试试这个

 <!doctype html> 
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />

<script type="text/javascript">



$( document ).delegate("#page1", "pageinit", function() {     

    $(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" id="page1">
    <div>
        <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>

<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>
</body>
</html>

和 page2.html ，

 <!doctype html> 
<html>
<head>   

<body>


<div data-role="page" id="page2">

 <script type="text/javascript">


$( document ).delegate("#page2", "pageinit", function() { 
    $(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>
    <div >
        <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>

试试这个

于 2012-05-31T04:47:55.500 回答