带有css的javascript切换按钮

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');
    });
});