gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 03:48:06 25 4
gpt4 key购买 nike

#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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com