如何创建预选选择？

Question

我有兴趣在页面前创建一个临时屏幕，让人们可以选择一个选项来确定他们显示的内容。

示例：屏幕询问“您是否有兴趣就购买事宜与我们联系或与我们的客户团队交谈”的联系页面。一旦他们点击一个选项，它将显示相应的联系表格（一个给客户团队发送电子邮件，另一个给采购团队发送电子邮件）。

由于我是 HTML/CSS/JavaScript 的新手，我不确定如何编写此代码，但根据我目前所学的知识，我假设这是更高级的 JavaScript。

Answer 1

我可以提供一个简单的示例让您了解它，但我建议您先进行更多基本的前端培训。

if (window.confirm('Do you want load form a?')) {
  document.getElementById('a').style.display = 'block';
} else {
  document.getElementById('b').style.display = 'block';
}

https://jsfiddle.net/8LmL4vdr/1/

Answer 2

我不完全确定您在问什么，但听起来如果您在单击按钮时更改元素的 z-index 值，它会起作用。

您可以阅读有关 z-index 的更多信息here。

或者，您可以使用display。

这是一个例子：

function layerPages(page) {
    if (page == "one") {
         document.getElementById("pageOne").style.display = "block"; // shows first page if that is what is called
    } else if (page == "two") {
         document.getElementById("pageTwo").style.display = "block"; // shows second page if that is what is called
    } else {
    	window.alert("error, wrong useage");
    }
    document.getElementById("originalPage").style.display = "none"; // hides main page
}

document.getElementById("buttonOne").addEventListener("click", function 
myfunction() {layerPages("one");}); // adds event listener that states that when the first button is clicked, the first page is shown and the original is hidden using the function "layerPages" (declared above)
document.getElementById("buttonTwo").addEventListener("click", function 
myfunction() {layerPages("two");}); // adds event listener that states that when the second button is clicked, the second page is shown and the original is hidden using the function "layerPages" (declared above)

#originalPage {
  background-color: black;
  width: 100px;
  height: 100px;
}
#pageOne, #pageTwo {
  display: none; /*You need to make sure that both #pageOne and #pageTwo start out as display: none;*/
  background-color: yellow;
  width: 100px;
  height: 100px;
}
#pageTwo {
  background-color: orange;
}

<div id="originalPage">
<button id="buttonOne">Page One</button>
<button id="buttonTwo">Page Two</button>
</div>
<div id="pageOne"></div>
<div id="pageTwo"></div>

<!--The content goes into each div, I'm sure that you can figure that out-->