[英]Need Help Creating A Segmented Control
我正在尝试创建一个分段控件来帮助组织我网站上的内容。 到目前为止,我已经创建了分段控件,并使用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>
再次感谢您的帮助!
您可以简单地将复选框的状态存储在变量中,并根据这些变量隐藏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();
}
});
这里的代码:
$( 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>
看看这个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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.