显示带有“选定”指示器的标签

Question

我在 durandal 项目中工作，并且有带有 3 个标签的 html 页面。 我希望标签的行为类似于单选按钮：当一个被选中时 - 另一个未被选中。

我希望标签是灰色的，而选中的标签（用户通过点击选择）会变成黑色。

当然，我可以用jquery来做，比如：

html:

 <label id="large" data-bind="click:change" style="color:Black">
 <label id="medium" data-bind="click:change" style="color:Gray">
 <label id="small" data-bind="click:change" style="color:Gray">

java脚本：

 var selectedId = "large"; //global variable
 function change(e, s){
   $('#'+selectedId).css('color', 'Gray'); // change previous-selection to gray
   $('#'+sender.currentTarget.id).css('color', 'Black');// change current-selection to gray
   selectedId = sender.currentTarget.id;
 }

但是，有没有更好的方法呢？

Answer 1

给它们一个通用的类，比如“.labels”，把它们包装起来，html就变成了：

 <div class="label-container">
    <label class="labels" id="large">large</label>
    <label class="labels" id="medium">medium</label>
    <label class="labels" id="small">small</label>
</div>

在您的 css 中定义 2 个类，一个具有活动状态（黑色）：

.labels{
color:#ededed;
}

.active{
color:#000;
}

还有你的 javascript/jquery：

$(document).on('click', '.labels', function(){
  $(this).addClass('active').siblings().removeClass('active');
});

你就完成了。 Fiddle 有关纯 css 解决方案，请参阅@gulty 的答案。

Answer 2

使用纯 CSS 和隐藏单选按钮： http://jsfiddle.net/GFC2G/2/

input[type="radio"]{display:none}
input[type="radio"]+label{ 
    color:red;
   -webkit-transition:0.2s all linear;
   -moz-transition:0.2s all linear;
   -o-transition:0.2s all linear;
   transition:0.2s all linear;
}
input[type="radio"]:checked+label{ 
    color:black; 
}

HTML：

<input id="radio1" type="radio" name="rad"><label for="rad">Radio 1</label>
<input id="radio2" type="radio" name="rad"><label for="rad">Radio 2</label>

Answer 3

工作代码如下，这将 100% 工作 http://jsfiddle.net/bqLbu/1/

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>


    <script>

$(function () { 
$('label').click(function () { //when you will click on any label
var selectedId=$(this).attr('id');//get id of that label

   $('#'+selectedId).css('color', 'black'); // change selection to black

    $('label').not('#'+selectedId).css('color', 'grey');  //others to grey
 }); 
  });

 </script>


<label id="large" data-bind="click:change" style="color:green">hi22</label>
 <label id="medium" data-bind="click:change" style="color:green">hi 2342</label>
 <label id="small" data-bind="click:change" style="color:green">hi424</label>