Question

在一个我必须提供标签的网站上工作时，我说标签名称是“从另一个视图中看到”，然后单击该标签后，我的完整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>

Answer 2

我将使用JavaScript和聪明的CSS类来解决此问题。

使用JavaScript，我会将事件侦听器附加到也附加了标签的输入元素上。单击标签时，它将触发输入元素的事件。可以从此EventListener调用一个函数，该函数可以将CSS类附加到<body>元素上。

document.querySelector('input#input-element-id').addEventListener('click', function() { 
  document.querySelector('body').classList.add('different-layout') 
})

然后可以使用CSS来应用不同的布局和样式。例如：

.different-layout .title { font-size: 12px; }`

但是，如果用户刷新其页面，则它们将恢复为原始视图。要阻止这种情况发生，您可以利用localStorage API并保存和检索当前选择的视图。您将在与设置样式相同的click事件中在localStorage中设置视图。您将检索它，然后在页面加载时添加类。

单击按钮更改UI布局

2 个答案: