Question

我正在使用jquery mobile构建移动应用程序。但我的段控制有问题。就像你可以看到here。

现在我想要实现的是，当我选择一个按钮时，此按钮的背景会产生不同的背景颜色。

您可以在这里找到我的HTML

<div data-role="fieldcontain"> 
                <fieldset data-role="controlgroup" data-type="horizontal" > 
                    <input type="radio" name="radio-view"  data-icon="segment-titlestyle-segonly"  id="segment1" value="choice1" checked="checked" /> 
                  <label for="segment1"  id="controls"><span class="ui-btn-text-controls">Iedereen</span></label> 
                <input type="radio" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment2" value="choice2" /> 
                    <label for="segment2" id="controls"><span class="ui-btn-text-controls">Team</span></label> 
                    <input type="radio" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment3" value="choice3" /> 
                    <label for="segment3" id="controls"><span class="ui-btn-text-controls">Favorieten</span></label>  
                </fieldset>

就像你可以看到我在背景中使用id控件。

   #controls{
        background-color: #C0C0C0 !important;
        border-color: black !important;
    }

#controls:overlay{
    background-color: #C0C0C0 !important;
}

但它不起作用。有人可以帮助我吗？

亲切的问候。

Answer 1

您可以使用纯CSS轻松完成此操作。写得像这样： -

 #controls{
        background-color: #C0C0C0 ;
        border-color: black ;
    }

   #controls:hover{
    background-color: red;
    display:inline-block;    
    }

input[type='radio']:checked + #controls{
    background:red;
}

选中此http://jsfiddle.net/Fa3rp/3/

Answer 2

首先，你不应该多次分配相同的ID 而是使用类。其次，如果你想根据选择更改任何样式，你需要创建一个类并切换到jquery。你可以使用addClass和removeClass。

CSS叠加和活动按钮

2 个答案: