javascript - 如何使各个部分像单独的网页一样运行并在 HTML 中导航到这些部分？-6ren

javascript - 如何使各个部分像单独的网页一样运行并在 HTML 中导航到这些部分？

转载作者：行者123 更新时间：2023-11-28 03:48:06

25

4

#s1{
  background-color:red;
  
height:100px;
}

#s2{
  background-color:blue;
  
height:100px;
}

#s3{
  background-color:orange;
  
height:100px;
}

#s4{
  background-color:yellow;
  
height:100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jquery -->
	<script	src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <!-- icons script -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  
  
</head>
<body>
<div class="container">
  <div class="row" id="s1">Section1</div>
  
  <div class="row" id="s2">Section2</div>


  <div class="row" id="s3">Section3</div>


  <div class="row" id="s4">Section4</div>

<div>


</body>

</html>

如何在这些部分中使用 css 和 javascript，使它们像具有滚动功能的单独网页一样。

示例:在第一次滚动期间，我想使用单独的 url 导航到第 2 部分。
在第二次滚动期间，我想使用单独的网址导航到第 3 部分。
在第三次滚动期间，我想使用单独的网址导航到第 4 部分。

最佳答案

您无法使用滚动条执行此操作。其次最好的事情是 anchor 链接。

当您单击这些内容时，它会滚动到特定的 iframe，因为我们将它们与 iframe ID 绑定(bind)在一起:

<a href="#F1" title="Click to go to section 1">Section 1</a>

<a href="#F2" title="Click to go to section 2">Section 2</a>

<a href="#F3" title="Click to go to section 3">Section 3</a>

<a href="#F4" title="Click to go to section 4">Section 4</a>

再往下看你的框架......

<iframe id="F1" src="URL 1"></iframe>

<iframe id="F2" src="URL 2"></iframe>

<iframe id="F3" src="URL 3"></iframe>

<iframe id="F4" src="URL 4"></iframe>

关于javascript - 如何使各个部分像单独的网页一样运行并在 HTML 中导航到这些部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48270315/

25

4

0

文章推荐： c++ - 欧拉计划 :#14 Integer overflow and Stack overflow

文章推荐： javascript - 无法查看标题/信息窗口

文章推荐： javascript - Angular js代码无法与外部插件一起使用

文章推荐： javascript - JavaScript 原型(prototype)，获得更多新形式

typescript - A 部分部分 io-ts
我在使用 io-ts 时遇到一些问题。我发现它确实缺乏文档，我取得的大部分进展都是通过 GitHub issues 取得的。不，我不明白 HKT，所以没有帮助。基本上，我在其他地方创建一个类型，ty
java - 匹配完整文件正则表达式中的 A 部分，但不匹配 B 部分
我必须创建一个正则表达式来搜索整个文件，以找到与 Java XML 解析器的第一部分(但不是第二部分)的匹配项。这将用于防止某些 XXE 攻击。不幸的是，它确实必须是单个正则表达式，并且它确实需要搜索
c# - 部分/部分中的 asp.net mvs 部分？
我有一些简单的 Shared/_Header.cshtml 文件中的内容。 My Shared/_Layout.cshtml 通过调用插入该代码 @Html.Partial("_Header") 目前
java - Selenium 只执行循环的 if != null 部分，不运行循环的 "else if null "部分
我有一个 if-else 语句，其中: 条件 1:ID 匹配并且自动填充某些字段。然后 if 语句只填充其余字段条件 2:ID 不匹配，所有字段均为空白。 ELSE 语句将它们全部填充当我使条件
javascript - 无法在 JSFIDDLE 中使用滚动魔法(第 1 部分，共 2 部分)
我正在开发一个单页滚动网站。我正在尝试实现 ScrollMagic 并固定第一部分，以便网站的其余部分滚动到固定部分的顶部。我尝试创建一个 jsfiddle 来显示问题，但我似乎无法让 jsfiddl
javascript - 既然有

首页

博学

6Ren·AI

商城

javascript - 如何使各个部分像单独的网页一样运行并在 HTML 中导航到这些部分？