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

给他们一个共同的课程，例如＆＃34; .labels＆＃34;并包装它们，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>

使用＆＃34;选择＆＃34;显示标签指示符

3 个答案: