需要帮助来创建分段控件

我正在尝试创建一个细分控件，以帮助组织我网站上的内容。到目前为止，我已经创建了分段控件，并查找了使用HTML和CSS的方式。现在，我想扩展此控件的功能，以在选择每个段时显示/隐藏一系列div标签。但是，JavaScript绝对不是我的强项，而且我还没有找到解决该问题的有效方法。

以下是到目前为止的代码。您还会注意到一系列div标签，其文本指示在选择控件中的每个细分时应显示哪些标签。我敢肯定，JavaScript是解决此问题的最简单方法，但是正如我所说，我对这种语言还不够熟悉，无法在此处提出一个好的解决方案。您可以提供任何有关扩展此分段控件的帮助，因此我可以根据所选的活动分段使用它来显示和隐藏不同的div标签。

这是我得到的HTML：

<ul class="segmented-control">
<li class="segmented-control__item">
    <input class="segmented-control__input" type="radio" value="1" name="option" id="option-1" checked>
    <label class="segmented-control__label" for="option-1">Step 1</label>
</li>

<li class="segmented-control__item">
    <input class="segmented-control__input" type="radio" value="2" name="option" id="option-2" >
    <label class="segmented-control__label" for="option-2">Step 2</label>
</li>

<li class="segmented-control__item">
    <input class="segmented-control__input" type="radio" value="3" name="option" id="option-3" >
    <label class="segmented-control__label" for="option-3">Step 3</label>
</li>
</ul>

这是在控件中选择一个细分时应显示的各种div标签。显然，他们是分段控制下的所有显示正确，现在，当选择一个新的细分市场什么也没有发生任何这些div标签。这就是JavaScript需要做的:)

<div class="Step_1_Content" align="center">

  <p>This is the content that should be displayed when the Step 1 segment has been selected</p>

</div>

<div class="Step_2_Content" align="center">

  <p>This is the content that should be displayed when the Step 2 segment has been selected</p>

</div>

<div class="Step_3_Content" align="center">

  <p>This is the content that should be displayed when the Step 3 segment has been selected</p>

</div>

这是我用于分段控件的CSS：

<style>

  .segmented-control {
  display: table;
  width: 100%;
  margin: 2em 0;
  padding: 0;
  }

  .segmented-control__item {
  display: table-cell;
  margin: 0;
  padding: 0;
  list-style-type: none;
  }

  .segmented-control__input {
  position: absolute;
  visibility: hidden;
  }

  .segmented-control__label {
  display: block;
  margin: 0 -1px -1px 0; /* -1px margin removes double-thickness borders between items */
  padding: 1em .25em;
  border: 1px solid #E62033;
  color: #E62033;
  font: 14px/1.5 sans-serif; 
  text-align: center;  
  cursor: pointer;
  }


  .segmented-control__label:hover {
  background: #ffffff;
  color: #E62033;
  }

  .segmented-control__input:checked + .segmented-control__label {
  background: #E62033;
  color: #ffffff; 
  }

</style>

再次感谢您的帮助！