卷起并单击打开页面

Posted 2023-05-08

技术标签:

【中文标题】卷起并单击打开页面【英文标题】：roll up and open a page on click 【发布时间】：2012-11-08 18:00:03 【问题描述】：

我想做的是：

点击按钮后，页面的一部分（实际按钮所在的位置 + 更多项目）被卷起（向上滑动），完成后用户被带到另一个页面

到目前为止我所做的代码如下（显然不起作用）：

<div id="content">
    <div>
        <p>something anything</p>
        ...
    </div>
<a id="roll"><img src="_images/butt-submit.png"></a>

</div>


<script>

$('#roll').click(function() 
     $('#content').animate(
          "width" : "100%",
          "height" : "0px"
         , function() 
     $(this).load('index2.html');
        );
);

</script>

你能帮我解决这个问题吗？

【问题讨论】：

【参考方案1】：

正如JSFiddle 所示，这应该可以解决问题

$("#roll").click(function() 
     $("#content").animate(
          width: "100%",
          height: "0px"
     , function() 
         window.location.href = "index2.html";
     );
);

但是，除了使用animate，您还可以使用slideUp 并简化您的代码：

$("#roll").click(function() 
     $("#content").slideUp(function() 
         window.location.href = "index2.html";
     );
);

为什么是`location.href` 而不仅仅是`location`？

如您所见，我使用了window.location.href，而我可以轻松地使用：

window.location = "index2.html";

这同样可以跨浏览器工作，但由于window.location 是一个对象，因此如果您使用更长的符号并定位特定的字符串属性会更清楚。

正确的`script` 块定义

您似乎也没有提供脚本块语言，这是as per HTML specification 的要求。第一句话说这是必须的：

_{HTML 4.01}_{18.2.2 指定脚本语言}

必须为文档中的每个 SCRIPT 元素实例指定类型属性。

在您的情况下，这意味着必须为 script 块提供语言，否则它们可能不会首先被识别为脚本块：

<script type="text/javascript">
...
</script>

【讨论】：

不幸的是，由于某种原因，这个没有工作。根本没有点击操作:( @PiotrCiszewski：我创建了一个 JSFiddle 来证明它有效。我使用了您的 HTML 和我的代码，另外将 animate 替换为 slideUp。 Click here. Works. 如果它在您的页面上不起作用，请检查您的控制台是否有 javascript 错误。您的脚本中一定还有其他错误。我会在我的代码中搜索任何问题。非常感谢@RobertKoritnik。这是完美的。我在这里这样做了：link 但它不起作用。它适用于您在jsfiddle.net 上的链接。为什么会这样？我放弃了... :( @PiotrCiszewski：尝试将 type 设置为您的 script 元素，以便浏览器将其识别为 javascript 块。 type="text/javascript"。根据规范，您必须提供脚本的语言。【参考方案2】：

如果您想将页面加载到content 元素中（因为您正在使用加载方法），您可以使用slideUp() 和slideDown() 方法，目前您正在设置@ 987654324@改为0，看不到加载的内容。

$(function()  // when the DOM is ready
   $('#roll').click(function(event) 
       event.preventDefault() // prevent the default action of the event
       $('#content').slideUp(function() 
            $(this).load('index2.html', function() // when load is complete
               $(this).slideDown() // slide down the #content element 
            );
       );
   );
)

如果你想将用户重定向到另一个页面，你可以使用window.location.href，但为什么不使用href属性：

<a id="roll" href='index2.html'><img src="_images/butt-submit.png"></a>

【讨论】：

确实，就像@RobertKoritnik 提到的那样，但这部分有效。同样当我应用这个时 - 空的 div 滑下来，里面没有内容，但我相信这是一个不同的问题。还是谢谢我已经应用了这个代码，但是再次 - 在它成功滑动之后，它会以一个空的#content div 向下滑动。没有重定向到 index2.html。我怎样才能完成这个？它几乎可以工作了 @PiotrCiszewski 不客气，请注意load 会加载整个页面，如果您要加载特定元素的内容，请首先确保路径正确，然后您可以选择该元素加载完毕，可以打码$(this).load('index2.html #idOfAnElement') 谢谢你。我会把它写下来以备不时之需，因为它肯定会有用。如何在同一个窗口中打开整个页面而不是从另一个窗口加载元素？我已将 href 添加到我的中，但它仍然不起作用。所以基本上我希望#content向上滑动，然后将所有内容重定向到新页面，所以新页面在同一个窗口中打开，就像普通的url一样。 @PiotrCiszewski 欢迎您，正如其他答案提到的，您可以使用window.location.href = index2.html，您可以替换所有与load方法相关的代码并使用window.location.href。跨度> 【参考方案3】：

线