HTML有没有基于之前选择的有效的页面导航方法？
Is there an effective method for page navigation in HTML based on previous choices?
我正在学习HTML，想做一个网站。我有一个关于导航的问题，我附上了一张图片以供参考。
基本上，我的菜单会给用户一些选择（A 和 B）。作为一个通用示例，假设这是一个辅导网站，询问用户想要如何学习。 A是视频学习，B是阅读教程学习。无论选择什么，他们都会导航到选项页面。在这种情况下，它可以询问他们想学习什么科目。 1可以是科学，2可以是数学，3可以是英语。然后，根据菜单页面中的选择，他们导航到其中一个登录页面。因此，A1 将是视频科学课，而 A2 将是视频数学课，而 A3 将是视频英语课。我的问题是：是否可以只有一个选项页面并使用 if 语句导航到其中一个登录页面，该语句保存了用户从菜单页面选择的 A 或 B？
也许您指的是不同的 html 页面，然后您可以使用 href。使用 jQuery 而不是 javaScript.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<div class="menu">
<button id="button-A">Choose A</button>
<button id="button-B">Choose B</button>
</div>
<div class="options">
<button id="button-1">Choose 1</button>
<button id="button-2">Choose 2</button>
<button id="button-3">Choose 3</button>
</div>
<div class="landing">
<span id="A-1">This is A 1</span>
<span id="A-2">This is A 2</span>
<span id="A-3">This is A 3</span>
<span id="B-1">This is B 1</span>
<span id="B-2">This is B 2</span>
<span id="B-3">This is B 3</span>
在脚本处（这里只有按钮 A 和按钮 1）：
// Button A-B
$('#button-A').click(function(){ // When button A is clicked,
localStorage.setItem('optionAorB' , 'A'); // Save the value of "optionAorB" to local storage, as "A"
$('.options').fadeIn(); // Show the options from first option,
$('.menu').fadeOut();
});
// Button 1-2-3
$('#button-1').click(function(){
var destination = localStorage.getItem('optionAorB'); // Load the value either it’s "A" or "B"
$('.menu').hide();
if (destination == 'A'){$('#A-1').css('display', 'block');} // Show specific landing page 1, if it’s A,
else {$('#B-1').css('display', 'block');} // If it’s B
});
CSS（风格）：
.menu, .options{
height: 100%;
width: 100%;
margin: 0;
display: block;
position: relative;
}
.options{display: none}
#A-1, #A-2, #A-3, #B-1, #B-2, #B-3{
background: #9C3535;
color: #B4BD90;
min-height: 20px;
width: 80%;
margin: 10%;
display: none;
position: relative;
}
#B-1, #B-2, B-3{
filter: hue-rotate(180deg);
}
更新示例，
在起始页中：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="example.css" />
<style>
*, *:after, *::before{box-sizing: border-box;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;touch-callout: none;focus-ring-color:rgba(0,0,0,0);user-select: none;outline: none;text-decoration: none;}
html, body{background: #EEE;color: #333;font: normal 15px Arial;line-height: 1.4;min-height: 100vh;width: 100vw;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 0;}
main{background: #EEE;color: #333;min-height: 80px;width: 80%;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 1;border: 4px double #777;border-radius: 8px;}
h2{font-size: 26px;}
p{font-size: 18px;}
.buttons-container{background: #EEE;color: #333;min-height: 98px;width: 100%;display: flex;display: box;position: relative;align-items: center;flex-direction: column;justify-content: space-between;z-index: 2;}
a{background: #444;color: #EEE;font: bold 16px Arial;text-align: center;line-height: 38px;height: 40px;width: 70%;margin: 0;display: block;position: relative;border: 2px solid #777;border-radius: 8px;}
</style>
<script src="example.js"></script>
<!-- Script below is not needed, it’s only for testing the variable, load the script at "body" onload then print the saved variable at div "#print-saved-value" -->
<!-- Session Storage is for temporary store until user’s browser is closed -->
<!-- Local Storage is for lasting store even after user’s browser is closed -->
<script>
function printingAorB(){
if (typeof(Storage) !== "undefined"){
localStorage.getItem("userChoice");
if (localStorage.userChoice === "isA"){document.getElementById("print-saved-value").innerHTML = "User choose A";}
else if (localStorage.userChoice === "B"){document.getElementById("print-saved-value").innerHTML = "User choose B";}
else {document.getElementById("print-saved-value").innerHTML = "Choice is blank";}
}
}
</script>
</head>
<body onload="printingAorB()">
<main>
<h2>The Start Page</h2>
<hr/>
<p>Below are option A and B. By clicking a link, the link will saving either variable "isA" or "B" and open "index2.html" page.<br><br><span style="color:#777">Session Storage is for temporary store until user’s browser is closed, while Local Storage is for lasting store even after user’s browser is closed.</span></p>
<div class="buttons-container">
<!-- Saving the variable to be used for next session, the index2.html -->
<a onclick="localStorage.setItem('userChoice', 'isA');" href="index2.html">A is good</a>
<a onclick="localStorage.setItem('userChoice', 'B');" href="index2.html">B is not bad</a>
</div>
<div id="print-saved-value"></div>
</main>
</body>
</html>
然后是目标前的页面，说是“index2.html”,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>*, *:after, *::before{box-sizing: border-box;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;touch-callout: none;focus-ring-color:rgba(0,0,0,0);user-select: none;outline: none;text-decoration: none;}html, body{background: #EEE;color: #333;font: normal 15px Arial;line-height: 1.4;min-height: 100vh;width: 100vw;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 0;}main{background: #EEE;color: #333;min-height: 80px;width: 80%;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 1;border: 4px double #777;border-radius: 8px;}h2{font-size: 26px;}p{font-size: 18px;}.buttons-container{background: #EEE;color: #333;min-height: 98px;width: 100%;display: flex;display: box;position: relative;align-items: center;flex-direction: column;justify-content: space-between;z-index: 2;}a{background: #444;color: #EEE;font: bold 16px Arial;text-align: center;line-height: 38px;height: 40px;width: 70%;margin: 0;display: block;position: relative;border: 2px solid #777;border-radius: 8px;}</style>
<!-- Script is loaded at body onload but can be placed at page’s bottom. Used by Version 1. -->
<script>
/* Version 1: load the saved variable then changing the landing page href based on the saved data. */
function changeLinks(){
/* Button/choice 1 */
document.getElementById("choice-1").onclick = function(){
localStorage.getItem("userChoice");
var destination1 = document.getElementById("choice-1");
if (localStorage.userChoice === "isA"){
destination1.setAttribute("href", "page_1_a.html");
} else {destination1.setAttribute("href", "page_1_b.html");
} return false;
}
/* Button/choice 2 */
document.getElementById("choice-2").onclick = function(){
localStorage.getItem("userChoice");
var destination2 = document.getElementById("choice-2");
if (localStorage.userChoice === "isA"){
destination2.setAttribute("onclick", "location.href='page_2_a.html'");
} else {destination2.setAttribute("onclick", "location.href='page_2_b.html'");
} return false;
}
}
</script>
</head>
<body onload="changeLinks()">
<main>
<h2>The Bridge Version 1</h2>
<hr/>
<p>Below are Choice 1 to 2 (before 3 and the rest). The landing pages for this will be like: page_1_a.html, page_1_b.html, page_2_a.html, and so on...</p>
<div class="buttons-container">
<a id="choice-1">Choice 1</a>
<a id="choice-2">Choice 2</a>
</div>
</main>
<main>
<h2>The Bridge Version 2</h2>
<hr/>
<p>Below are Choice 1 to 2 (before 3 to the rest). The script at landing pages will determine either is it A or B.</p>
<div class="buttons-container">
<a id="choice-1" href="page_1.html">Choice 1</a>
<a id="choice-2" href="page_2.html">Choice 2</a>
</div>
</main>
</body>
</html>
以及页面示例 _1.html，使用第二个版本时。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>*, *:after, *::before{box-sizing: border-box;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;touch-callout: none;focus-ring-color:rgba(0,0,0,0);user-select: none;outline: none;text-decoration: none;}html, body{background: #EEE;color: #333;font: normal 15px Arial;line-height: 1.4;min-height: 100vh;width: 100vw;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 0;}main{background: #EEE;color: #333;min-height: 80px;width: 80%;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 1;border: 4px double #777;border-radius: 8px;}h2{font-size: 26px;}p{font-size: 18px;}.buttons-container{background: #EEE;color: #333;min-height: 98px;width: 100%;display: flex;display: box;position: relative;align-items: center;flex-direction: column;justify-content: space-between;z-index: 2;}a{background: #444;color: #EEE;font: bold 16px Arial;text-align: center;line-height: 38px;height: 40px;width: 70%;margin: 0;display: block;position: relative;border: 2px solid #777;border-radius: 8px;}</style>
<!-- Showing content A or content B -->
<script>
function determine2ShowingAorB(){
if (typeof(Storage) !== "undefined"){
localStorage.getItem("userChoice");
if (localStorage.userChoice === "isA"){
document.getElementById("content-a").style.display = "block";
} else if (localStorage.userChoice === "isA"){
document.getElementById("content-b").style.display = "block";
} else {}
}
}
</script>
<style>
#content-a, #content-b{display: none;}
</style>
</head>
<body onload="determine2ShowingAorB()">
<main>
<h2>The Landing, Page 1</h2>
<hr/>
<p>Below will be content of A or B. If there’s nothing, then the variable is not loaded.</p>
<div id="content-a">
<h1>This is content A</h1>
</div>
<div id="content-b">
<h1>This is content B</h1>
</div>
</main>
</body>
</html>
我正在学习HTML，想做一个网站。我有一个关于导航的问题，我附上了一张图片以供参考。
基本上，我的菜单会给用户一些选择（A 和 B）。作为一个通用示例，假设这是一个辅导网站，询问用户想要如何学习。 A是视频学习，B是阅读教程学习。无论选择什么，他们都会导航到选项页面。在这种情况下，它可以询问他们想学习什么科目。 1可以是科学，2可以是数学，3可以是英语。然后，根据菜单页面中的选择，他们导航到其中一个登录页面。因此，A1 将是视频科学课，而 A2 将是视频数学课，而 A3 将是视频英语课。我的问题是：是否可以只有一个选项页面并使用 if 语句导航到其中一个登录页面，该语句保存了用户从菜单页面选择的 A 或 B？
也许您指的是不同的 html 页面，然后您可以使用 href。使用 jQuery 而不是 javaScript.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<div class="menu">
<button id="button-A">Choose A</button>
<button id="button-B">Choose B</button>
</div>
<div class="options">
<button id="button-1">Choose 1</button>
<button id="button-2">Choose 2</button>
<button id="button-3">Choose 3</button>
</div>
<div class="landing">
<span id="A-1">This is A 1</span>
<span id="A-2">This is A 2</span>
<span id="A-3">This is A 3</span>
<span id="B-1">This is B 1</span>
<span id="B-2">This is B 2</span>
<span id="B-3">This is B 3</span>
在脚本处（这里只有按钮 A 和按钮 1）：
// Button A-B
$('#button-A').click(function(){ // When button A is clicked,
localStorage.setItem('optionAorB' , 'A'); // Save the value of "optionAorB" to local storage, as "A"
$('.options').fadeIn(); // Show the options from first option,
$('.menu').fadeOut();
});
// Button 1-2-3
$('#button-1').click(function(){
var destination = localStorage.getItem('optionAorB'); // Load the value either it’s "A" or "B"
$('.menu').hide();
if (destination == 'A'){$('#A-1').css('display', 'block');} // Show specific landing page 1, if it’s A,
else {$('#B-1').css('display', 'block');} // If it’s B
});
CSS（风格）：
.menu, .options{
height: 100%;
width: 100%;
margin: 0;
display: block;
position: relative;
}
.options{display: none}
#A-1, #A-2, #A-3, #B-1, #B-2, #B-3{
background: #9C3535;
color: #B4BD90;
min-height: 20px;
width: 80%;
margin: 10%;
display: none;
position: relative;
}
#B-1, #B-2, B-3{
filter: hue-rotate(180deg);
}
更新示例，
在起始页中：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="example.css" />
<style>
*, *:after, *::before{box-sizing: border-box;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;touch-callout: none;focus-ring-color:rgba(0,0,0,0);user-select: none;outline: none;text-decoration: none;}
html, body{background: #EEE;color: #333;font: normal 15px Arial;line-height: 1.4;min-height: 100vh;width: 100vw;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 0;}
main{background: #EEE;color: #333;min-height: 80px;width: 80%;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 1;border: 4px double #777;border-radius: 8px;}
h2{font-size: 26px;}
p{font-size: 18px;}
.buttons-container{background: #EEE;color: #333;min-height: 98px;width: 100%;display: flex;display: box;position: relative;align-items: center;flex-direction: column;justify-content: space-between;z-index: 2;}
a{background: #444;color: #EEE;font: bold 16px Arial;text-align: center;line-height: 38px;height: 40px;width: 70%;margin: 0;display: block;position: relative;border: 2px solid #777;border-radius: 8px;}
</style>
<script src="example.js"></script>
<!-- Script below is not needed, it’s only for testing the variable, load the script at "body" onload then print the saved variable at div "#print-saved-value" -->
<!-- Session Storage is for temporary store until user’s browser is closed -->
<!-- Local Storage is for lasting store even after user’s browser is closed -->
<script>
function printingAorB(){
if (typeof(Storage) !== "undefined"){
localStorage.getItem("userChoice");
if (localStorage.userChoice === "isA"){document.getElementById("print-saved-value").innerHTML = "User choose A";}
else if (localStorage.userChoice === "B"){document.getElementById("print-saved-value").innerHTML = "User choose B";}
else {document.getElementById("print-saved-value").innerHTML = "Choice is blank";}
}
}
</script>
</head>
<body onload="printingAorB()">
<main>
<h2>The Start Page</h2>
<hr/>
<p>Below are option A and B. By clicking a link, the link will saving either variable "isA" or "B" and open "index2.html" page.<br><br><span style="color:#777">Session Storage is for temporary store until user’s browser is closed, while Local Storage is for lasting store even after user’s browser is closed.</span></p>
<div class="buttons-container">
<!-- Saving the variable to be used for next session, the index2.html -->
<a onclick="localStorage.setItem('userChoice', 'isA');" href="index2.html">A is good</a>
<a onclick="localStorage.setItem('userChoice', 'B');" href="index2.html">B is not bad</a>
</div>
<div id="print-saved-value"></div>
</main>
</body>
</html>
然后是目标前的页面，说是“index2.html”,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>*, *:after, *::before{box-sizing: border-box;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;touch-callout: none;focus-ring-color:rgba(0,0,0,0);user-select: none;outline: none;text-decoration: none;}html, body{background: #EEE;color: #333;font: normal 15px Arial;line-height: 1.4;min-height: 100vh;width: 100vw;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 0;}main{background: #EEE;color: #333;min-height: 80px;width: 80%;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 1;border: 4px double #777;border-radius: 8px;}h2{font-size: 26px;}p{font-size: 18px;}.buttons-container{background: #EEE;color: #333;min-height: 98px;width: 100%;display: flex;display: box;position: relative;align-items: center;flex-direction: column;justify-content: space-between;z-index: 2;}a{background: #444;color: #EEE;font: bold 16px Arial;text-align: center;line-height: 38px;height: 40px;width: 70%;margin: 0;display: block;position: relative;border: 2px solid #777;border-radius: 8px;}</style>
<!-- Script is loaded at body onload but can be placed at page’s bottom. Used by Version 1. -->
<script>
/* Version 1: load the saved variable then changing the landing page href based on the saved data. */
function changeLinks(){
/* Button/choice 1 */
document.getElementById("choice-1").onclick = function(){
localStorage.getItem("userChoice");
var destination1 = document.getElementById("choice-1");
if (localStorage.userChoice === "isA"){
destination1.setAttribute("href", "page_1_a.html");
} else {destination1.setAttribute("href", "page_1_b.html");
} return false;
}
/* Button/choice 2 */
document.getElementById("choice-2").onclick = function(){
localStorage.getItem("userChoice");
var destination2 = document.getElementById("choice-2");
if (localStorage.userChoice === "isA"){
destination2.setAttribute("onclick", "location.href='page_2_a.html'");
} else {destination2.setAttribute("onclick", "location.href='page_2_b.html'");
} return false;
}
}
</script>
</head>
<body onload="changeLinks()">
<main>
<h2>The Bridge Version 1</h2>
<hr/>
<p>Below are Choice 1 to 2 (before 3 and the rest). The landing pages for this will be like: page_1_a.html, page_1_b.html, page_2_a.html, and so on...</p>
<div class="buttons-container">
<a id="choice-1">Choice 1</a>
<a id="choice-2">Choice 2</a>
</div>
</main>
<main>
<h2>The Bridge Version 2</h2>
<hr/>
<p>Below are Choice 1 to 2 (before 3 to the rest). The script at landing pages will determine either is it A or B.</p>
<div class="buttons-container">
<a id="choice-1" href="page_1.html">Choice 1</a>
<a id="choice-2" href="page_2.html">Choice 2</a>
</div>
</main>
</body>
</html>
以及页面示例 _1.html，使用第二个版本时。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>*, *:after, *::before{box-sizing: border-box;tap-highlight-color: rgba(0,0,0,0);tap-highlight-color: transparent;touch-callout: none;focus-ring-color:rgba(0,0,0,0);user-select: none;outline: none;text-decoration: none;}html, body{background: #EEE;color: #333;font: normal 15px Arial;line-height: 1.4;min-height: 100vh;width: 100vw;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 0;}main{background: #EEE;color: #333;min-height: 80px;width: 80%;padding: 4vw;margin: 0;display: flex;position: relative;flex-direction: column;align-items: center;justify-content: space-around;z-index: 1;border: 4px double #777;border-radius: 8px;}h2{font-size: 26px;}p{font-size: 18px;}.buttons-container{background: #EEE;color: #333;min-height: 98px;width: 100%;display: flex;display: box;position: relative;align-items: center;flex-direction: column;justify-content: space-between;z-index: 2;}a{background: #444;color: #EEE;font: bold 16px Arial;text-align: center;line-height: 38px;height: 40px;width: 70%;margin: 0;display: block;position: relative;border: 2px solid #777;border-radius: 8px;}</style>
<!-- Showing content A or content B -->
<script>
function determine2ShowingAorB(){
if (typeof(Storage) !== "undefined"){
localStorage.getItem("userChoice");
if (localStorage.userChoice === "isA"){
document.getElementById("content-a").style.display = "block";
} else if (localStorage.userChoice === "isA"){
document.getElementById("content-b").style.display = "block";
} else {}
}
}
</script>
<style>
#content-a, #content-b{display: none;}
</style>
</head>
<body onload="determine2ShowingAorB()">
<main>
<h2>The Landing, Page 1</h2>
<hr/>
<p>Below will be content of A or B. If there’s nothing, then the variable is not loaded.</p>
<div id="content-a">
<h1>This is content A</h1>
</div>
<div id="content-b">
<h1>This is content B</h1>
</div>
</main>
</body>
</html>