需要幫助創建分段控件

Question

我正在嘗試創建一個分段控件來幫助組織我網站上的內容。 到目前為止，我已經創建了分段控件，並使用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>

再次感謝您的幫助！

Answer 1

您可以簡單地將復選框的狀態存儲在變量中，並根據這些變量隱藏div。

下面包含的第一個變量用於頁面加載，其他用於對象更改時。

在這里查看： https ： //jsfiddle.net/ezfy66f9/

var checked1 = $('#option-1').is(':checked');
var checked2 = $('#option-2').is(':checked');
var checked3 = $('#option-3').is(':checked');

if (checked1 == 1) {
    $('.Step_1_Content').show();
    $('.Step_2_Content').hide();
    $('.Step_3_Content').hide();
} else if (checked2 == 1) {
    $('.Step_2_Content').show();
    $('.Step_1_Content').hide();
    $('.Step_3_Content').hide();
} else if (checked3 == 1) {
    $('.Step_3_Content').show();
    $('.Step_1_Content').hide();
    $('.Step_2_Content').hide();
}

$(".segmented-control").change(function () {
    var checked1 = $('#option-1').is(':checked');
    var checked2 = $('#option-2').is(':checked');
    var checked3 = $('#option-3').is(':checked');

    if (checked1 == 1) {
        $('.Step_1_Content').show();
        $('.Step_2_Content').hide();
        $('.Step_3_Content').hide();
    } else if (checked2 == 1) {
        $('.Step_2_Content').show();
        $('.Step_1_Content').hide();
        $('.Step_3_Content').hide();
    } else if (checked3 == 1) {
        $('.Step_3_Content').show();
        $('.Step_1_Content').hide();
        $('.Step_2_Content').hide();
    }
});

Answer 2

這里的代碼：

 $( document ).ready(function() { // load initial state hideContent(); $(".step1").show(); // click on li-element $( "li" ).on( "click", function() { var li = $(this); // find the content number var number = li.find("input").attr("value"); hideContent(); showContent(number) ; }); }); function hideContent() { $(".content").hide(); } function showContent(number) { $(".content.step"+number).show(); } 

  .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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="segmented-control"> <li class="segmented-control__item"> <input class="segmented-control__input" type="radio" value="1" name="option" id="option-1" checked="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 class="step1 content" align="center"> <p>This is the content that should be displayed when the Step 1 segment has been selected</p> </div> <div class="content step2" align="center"> <p>This is the content that should be displayed when the Step 2 segment has been selected</p> </div> <div class="content step3" align="center"> <p>This is the content that should be displayed when the Step 3 segment has been selected</p> </div> 

Answer 3

看看這個jsfiddle ，它只是html + css的解決方案。 但是這個需要將div放在適當的段控制li元素內，如下所示：

<li class="segmented-control__item">
    <input id="option-1" ...>
    <label class="segmented-..." for="option-1">Step 1</label>
    <div class="Step_1...">
       <p>some content...</p>
    </div>
</li>

還有一些額外的CSS。