需要帮助创建分段控件

I'm trying to create a segmented control to help organize content on my website. So far, I've got the segmented control created and looking the way I want using HTML and CSS. Now, I would like to expand the functionality of this control to show / hide a series of div tags when each segment is selected. However, JavaScript is definitely not my forte, and I haven't been able to find a good, responsive solution to this problem.

我正在尝试创建一个分段控件来帮助组织我的网站上的内容。到目前为止,我已经创建了分段控件,并使用HTML和CSS查找我想要的方式。现在,我想扩展此控件的功能,以在选择每个段时显示/隐藏一系列div标签。然而,JavaScript绝对不是我的强项,我无法找到一个好的,响应迅速的解决方案来解决这个问题。

Below is the code I've got so far. You'll also notice a series of div tags whose text indicates which tags should be shown when each segment in the control is selected. I'm pretty sure JavaScript would be the easiest solution to this problem, but as I said, I'm not familiar enough with that language to come up with a good solution here. Any help you can provide on expanding this segmented control so I can use it to show and hide different div tags based on the active segment that is selected would be greatly appreciated.

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

Here's the HTML I've got:

这是我得到的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>

Here's the various div tags that should be displayed when a segment within the control is selected. Obviously they are all displaying right under the segmented control right now, and nothing happens to any of these div tags when a new segment is selected. This is what the JavaScript would need to do :)

这是选择控件中的段时应显示的各种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>

And here's the CSS I'm using for the Segmented Control:

这是我用于分段控制的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>

Once again, thanks in advance for your help!

再次感谢您的帮助!

3 个解决方案

#1

You can simply store the state of the checkboxes in variables, and hide the divs based on those variables.

您可以简单地将复选框的状态存储在变量中,并根据这些变量隐藏div。

The first variables I included below are used on page load, the other ones when the object has changed.

下面包含的第一个变量用于页面加载,其他用于对象更改时。

Check it out here: https://jsfiddle.net/ezfy66f9/

在这里查看: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();
    }
});

#2

here the code:

这里的代码:

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

#3

Look this jsfiddle, it's html+css only solution. But this one requires a placement of your div's with content inside of appropriate segment control li elements, like this:

看看这个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>

and also some additional css.

还有一些额外的CSS。