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

这里是代码：

＆＃13;

$( 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(); 
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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。

需要帮助创建分段控件

3 个答案: