Question

我有这个切换按钮，当我点击它时按钮显示它处于活动状态并且css改变，因此它更暗。但当我点击另一个按钮时，切换不会停用（打开/关闭）我想要更改它，以便当我点击它时它打开然后当我点击另一个按钮时关闭。

按钮

<div class="btn-group float_right">
    <a id="gridBtn" onclick="$.views.stuff.ToggleView('gridView')" title="View as grid" class="btn" href="#"><i class="icon-th-large"></i></a>
    <a id="listBtn" onclick="$.views.stuff.ToggleView('listView')" title="View as list" class="btn" href="#"><i class="icon-th-list"></i></a>
</div>

的javascript

$(document).ready(function () {
        $('a#gridBtn').click(function () {
            $(this).toggleClass("down");
        });
        $('a#listBtn').click(function () {
            $(this).toggleClass("down");
        });
    });

Answer 1

试试这个CSS技巧：

<div class="btn-group float_right">
    <label>
        <input type="radio" name="viewbuttons" />
        <a id="gridBtn" .....>...</a>
    </label>
    <label>
        <input type="radio" name="viewbuttons" />
        <a id="listBtn" .....>...</a>
    </label>
</div>

然后添加这个CSS：

.btn-group input {display:none}
.btn-group a { /* your "deselected" styles here */ }
.btn-group input+a { /* your "selected" styles here */ }

这非常有效，因为你不需要任何jQuery来使它工作;）

Answer 2

您可以使用以下方式为#gridBtn down课程提供：

$('#gridBtn').addClass('down');

此外，不需要两个单独的点击处理程序：

  $('a#gridBtn, a#listBtn').click(function() {
    $(this).toggleClass('down').siblings().removeClass('down');
  });

Demo

Answer 3

您需要同时设置其他按钮的状态吗？

$(document).ready(function () {
    $('a#gridBtn').click(function () {
        $(this).toggleClass("down");
        $('a#listBtn').attr('class', 'up');
    });
    $('a#listBtn').click(function () {
        $(this).toggleClass("down");
        $('a#gridBtn').attr('class', 'up');
    });
});

用css javascript切换按钮

3 个答案:

Demo