如何创建切换按钮？ [英] How do you create a toggle button?

问题描述

我想使用css在html中创建切换按钮。我想要它，所以当你点击它，它保持推入，比当你再次点击它再次弹出。

I want to create a toggle button in html using css. I want it so that when you click on it , it stays pushed in and than when you click it on it again it pops out.

如果没有办法只使用css。有没有办法使用jQuery？

If theres no way of doing it just using css. Is there a way to do it using jQuery?

推荐答案

好的语义方式是使用复选框，如果它被检查或不是不同的方式。但是没有好的方法去做。你必须添加额外的span，extra div，并且为了一个非常漂亮的外观，添加一些javascript。

The good semantic way would be to use a checkbox, and then style it in different ways if it is checked or not. But there are no good ways do to it. You have to add extra span, extra div, and, for a really nice look, add some javascript.

所以最好的解决方案是使用一个小的jQuery函数和两个背景图像为样式的按钮的两个不同状态。由边框提供向上/向下效果的示例：

So the best solution is to use a small jQuery function and two background images for styling the two different statuses of the button. Example with an up/down effect given by borders:

HTML

<a id="button" title="button">Press Me</a>

CSS

a {
    background: #ccc;
    cursor: pointer;
    border-top: solid 2px #eaeaea;
    border-left: solid 2px #eaeaea;
    border-bottom: solid 2px #777;
    border-right: solid 2px #777;
    padding: 5px 5px;       
    }

a.down {
    background: #bbb;
    border-top: solid 2px #777;
    border-left: solid 2px #777;
    border-bottom:solid 2px  #eaeaea;
    border-right: solid 2px #eaeaea;
    }

JQUERY

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

显然，您可以添加表示按钮向上和向下按钮的背景图片， 。

Obviously, you can add background images that represent button up and button down, and make the background color transparent.

这篇关于如何创建切换按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！