带有 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 即可使其工作;)