javascript - 单击按钮更改 UI 布局

Question

我在网站上工作，我必须提供一个标签，说标签名称是“在另一个 View 中查看”，单击该标签后，我的完整 UI 布局或模板应该发生变化(网页包含各种元素，如表格，按钮、表格等)。

因为我刚开始学习 UI 开发，所以我真的需要帮助。任何人都可以建议我如何实现这一目标吗？我应该维护两个不同的模板来一次单击更改布局(但我认为维护两个不同的模板会很困难)还是其他什么？

Answer 1

如果我没理解错的话，您想在表单上制作一个可点击的标签，然后在点击后执行另一个操作吗？

根据您设计的复杂程度，您可以选择所有元素，然后使用 JavaScript 修改它们相应的样式。这是一个简单的示例，作为传达想法的视觉效果。

$("label").on("click", function() {
	$("form").addClass("hideme")
  $(".container").removeClass("hideme")
})

.container {
  position: absolute;
  top: 0;
}
.hideme {
  opacity: 0;
  z-index: -99999;
}

label:hover {
cursor: pointer;
}
.showme {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form>
<label>Click ME</label>
<input type="text"></input>
</form>

<div class="container hideme">
<p>I am a new container</p>
</div>

</div>