HTML + CSS：使用图像自定义选项卡或按钮组

Question

我正在尝试实现类似于Snapchat的用户界面

它们有4个类别，分别显示在4个按钮上

当用户单击任何按钮时，它将被切换并更新下面的内容。

我想到了标签或按钮组。但我不知道如何使用Snapchat等图片进行自定义。

也许我的方法不好，欢迎任何更好的方法。

任何建议都值得赞赏。

Answer 1

您要寻找的是两件事。

1. 某种标签面板
2. 如何切换背景图像。

实际上，使用jQuery或JavaScript都很简单。 这是一个关于如何按照这些思路制作东西的示例。我建议您阅读评论，以便您了解发生了什么。

function toggleTab(element, tabname) {
  // Select all tab panels and hide them
  var tabPanels = $('.panel');
  // Loop through every element and hide it by changing the display to none
  for (var i =0; i < tabPanels.length; i++) {
    $(tabPanels[i]).css('display', 'none');
  }
  // Now that we hid everything we can show the user the element that they clicked on.
  // We select the panel that has the ID of tabname
  $('#' + tabname).css('display', 'block');

  // For toggling styling
  var tabButtons = $('.button');
  for (var i =0; i < tabButtons.length; i++) {
    $(tabButtons[i]).removeClass('toggled');
  }
  $(element).addClass('toggled');
}

#buttoncontainer {
  display: flex;
  justify-content: space-evenly;
}

.button {
  width: 150px;
  height: 150px;
  font-size: 24px;
  text-align: center;
  line-height: 150px;
  cursor: pointer;
  background-color: blue;
  color: white;
}

.button:hover {
  /* Background-color can also be background-image */
  background-color: rgb(0, 0, 160);
}

/* This class will only apply to the div of the active tab panel */
.toggled {
  /* Background-color can also be background-image */
  background-color: lime !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttoncontainer">
  <div class="button" onclick="toggleTab(this, 'step1')">Step 1</div>
  <div class="button" onclick="toggleTab(this, 'step2')">Step 2</div>
  <div class="button" onclick="toggleTab(this, 'step3')">Step 3</div>
</div>

<div id="step1" class="panel">
  <h2>Step 1</h2>
  <p>This is step 1</p>
</div>

<div id="step2" class="panel" style="display:none">
  <h2>Step 2</h2>
  <p>This is step 2</p>
</div>

<div id="step3" class="panel" style="display:none">
  <h2>Step 3</h2>
  <p>This is step 3</p>
</div>

我确定您可以从这里自己解决问题。剩下要做的唯一一件事情就是为其正确地设置样式。