Question

我使用swipe.js函数编写一个webapp来交换两个页面。问题是，我不会刷到第一页，如果我将html代码删除到第一页，它将在两页之间来回滑动来回。第一页打开时，我无法加载第二页。谁知道问题可能是什么？

代码：

<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
    <meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>

<body>
  <div data-role="page" id="article1">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <h1>Articles1</h1>
    </div>
    <div data-role="content">

<style>
* {
    box-sizing: border-box;
    background-color: #062F43;
}

body {
  margin: auto;
}
/* Style the header */
.header {
    background-color: #062F43;
    padding: 20px;
    text-align: center;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #062F43;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #062F43;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
    background-color: #062F43;
    color: white;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 15px;
    background-color: #062F43;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width:1080px) {
    .column {
        width: 100%;
    }
}

#txt {
   color: white; 
}

</style>
</head>
<body>
<div class="colunm">
  <h>
    <p>
       <p>

<div class="pie">
    <span class="overlay"></span>
</div>
<style>
.pie {
    margin:  auto;
    position: relative;
    width: 200px;
    height: 100px;
    border-radius: 200px 200px 0 0;
    overflow: hidden;
}
.pie::after {
    transform: rotate({{temp_x}}deg);      /*  set rotation degree  */
    background: linear-gradient(to right, rgba(51,102,255,1) 50%, rgba(255,0,0,1) 100%);
    transform-origin: center bottom;
}
.pie::before {
    border: 2px solid black;
}
.pie .overlay{
    top: 8px;                      /*  match border width  */
    left: 8px;                     /*  match border width  */
    width: calc(100% - 16px);       /*  match border width times 2  */
    height: calc(200% - 10px);      /*  match border width times 2  */
    border-radius: 100%;
    background: #062F43;
    z-index: 1;                     /*  move it on top of the pseudo elements  */
}
.pie *,
.pie::before,
.pie::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    box-sizing: border-box;
}   
</style>
</body>
<body>
 <div class="header">
  <h1 style="color: #07969E;"> Hot water left</h1>
  <p id="temp_f" style="color: white;"> 0%</p>
</div>
<div class="row">
  <div class="column">
    <h2> <center style="color: #07969E;"> Duration </h2> </center>
    <p> <center style="color: white;">14:42</p> </center>
</p>
  </div>
  <div class="column">
    <h2> <center style="color: #07969E;"> Temperature</h2> </center>
    <p id="temp_c"> <center style="color: white;">0 C°</p> </center>
</p>
  </div>
  <div class="column">
    <h2> <center style="color: #07969E;"> Hot water left</h2> </center>
    <p id="temp_x"> <center style="color: white;">0</p> </center>
</div>
  <div class="column">
    <h2> <center style="color: #07969E;"> Clock</h2> </center>
    <head>
<style="color=white">
<script>

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}


</script>
</head><body onload="startTime()">

<div> <center id="txt"></div> </center>

 </div>

    </div>
</div>


  <div data-role="page" id="article2">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Articles</h1>
    </div>
    <div data-role="content">
       <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <link rel="stylesheet" type="text/css" title="default" href="css/main.css">

  <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
  <script type="text/javascript" src="js/custom.js"></script>

<style>
* {
    box-sizing: border-box;
    background-color: #062F43;
}

body {
  margin: auto;
}
/* Style the header */
.header {
    background-color: #062F43;
    padding: 20px;
    text-align: center;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #062F43;
}

/* Style the topnav links */
.topnav a {
    float: left;
    display: block;
    color: #062F43;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
    background-color: #062F43;
    color: white;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 50%;
    padding: 15px;
    background-color: #062F43;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width:1080px) {
    .column {
        width: 100%;
    }
}

#txt {
   color: white; 
}

</style>
<style>
.button {
    background-color: #07969E;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

.button:hover {background-color: #008a93}

.button:active {
  background-color: #008a93;
  box-shadow:  #666;
  transform: translateY(4px);
</style>
</head>
<body>

 <div class="header">
  <h1 style="color: #07969E;"> Hot water left</h1>
  <button class="button">Button</button>

</div>
<div class="row">
  <div class="column">
    <h2> <center style="color: #07969E;"> Duration </h2> 
    <center> <button class="button">Button</button> </center>
  </div>
  <div class="column">
    <h2> <center style="color: #07969E;"> Temperature</h2> 
    <center> <button class="button">Button</button> </center>
  </div>
  <div class="column">
    <h2> <center style="color: #07969E;"> Hot water left</h2> 
    <center> <button class="button">Button</button> </center>
</div>
  <div class="column">
    <h2> <center style="color: #07969E;"> Clock</h2> 
   <center> <button class="button">Button</button> </center>
<style="color=white">

<div> <center id="txt"></div> 
    </div>
</div>

<div>
<div class="row">
    </div>
    <center div class="column1" align="cente">
            <h2> <center style="color: #07969E;">Live graph</h2>
            <h3> <center style="color: white;"> <a href="index.html" class="transition">Click Me</a> </h3>
            </div>
        <div id="sidebar">
    </div>
  </div>

  <div data-role="page" id="article3">
    <div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
      <a href="#article1" data-icon="home" data-iconpos="notext">Home</a>
      <h1>Articles</h1>
    </div>
    <div data-role="content">
      <p>Article 3</p>
    </div>
    </div>

</body>
<script>
$(document).on('swipeleft', '.ui-page', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $.mobile.activePage.next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) {
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '.ui-page', function(event){     
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});
</script>
</html>

Answer 1

你的标记在那里混淆了很多。 the standard only allows one of each时有多个<head>和<body>标签。

HTML 4文档由三部分组成：


包含HTML版本信息的行

声明性标题部分（由HEAD元素分隔），

一个正文，其中包含文档的实际内容。正文可以由BODY元素或FRAMESET元素实现。

您需要将代码缩减为有效的HTML文档才能使其正常工作。看起来您将多个单独文件的源复制为一个，但您必须组合不同的元素。

从基本HTML结构开始
将各个head部分中的所有元素复制到<head>
将所有<style>代码复制到<head>
将每个页面的所有标记复制到<body>元素
将所有<script>代码复制到<body>

执行此操作时，请确保删除冗余代码。例如，样式标签看起来非常接近。

试图在页面上使用swipe.js函数

1 个答案: