如何使按钮保持活动状态而不是恢复到正常状态？

Question

我希望触摸屏按钮在页面处于活动状态时保持按下状态，而不是恢复到正常状态。

有没有简单的解决办法？

也就是说，你在主页上，有三个按钮，你按下一个按钮，它会带你到新页面并用不同的颜色着色。

我正在使用的代码如下所示：

HTML：

<input type="button" value="Name" class="Class" onclick="location.href='#';">

CSS：

.class {display:inline;border:solid #000 3px;margin-left:auto;margin-right:auto;padding:10px;font-family: 'helvetica neue', helvetica, arial;font-size:16px;font-weight:600;
color:#fff; -webkit-border-radius: 0.5em;   -moz-border-radius: 0.5em;  border-radius: 0.5em;
background: #aaa; /* Old browsers */
background: -moz-linear-gradient(top,  #636363 0%, #ffffff 4%, #000000 75%, #ffff00 97%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#636363), color-stop(4%,#ffffff), color-stop(75%,#000000), color-stop(97%,#ffff00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #636363 0%,#ffffff 4%,#000000 75%,#ffff00 97%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #636363 0%,#ffffff 4%,#000000 75%,#ffff00 97%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #636363 0%,#ffffff 4%,#000000 75%,#ffff00 97%); /* IE10+ */
background: linear-gradient(to bottom,  #636363 0%,#ffffff 4%,#000000 75%,#ffff00 97%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#636363', endColorstr='#ffff00',GradientType=0 ); /* IE6-9 */

}

.class:active {background: #bababa; /* Old browsers */
background: -moz-linear-gradient(top,  #bababa 1%, #636363 69%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#bababa), color-stop(69%,#636363), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #bababa 1%,#636363 69%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #bababa 1%,#636363 69%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #bababa 1%,#636363 69%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #bababa 1%,#636363 69%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}

Answer 1

我要做的是为链接分配某种“活动”类（在服务器端，通过使用一些 javascript），并为其提供与悬停状态相同的样式。像这样的：

#menu a:hover, #menu a.active {
  background: #[PressedStateColor];
}

您可以使用一些简单的 javascript (jQuery) 添加“活动”类，如下所示：

// when the dom is ready
$(document).ready(function() {
    // for each of the links in the #menu
    $('#menu a').each(function() {
        // if the href of the link matches the one for the current page
        if ($(this).attr('href') == window.location.href) {
            // add the class 'active' to the link
            $(this).addClass('active');
        }    
    });
});

请注意，这不是万无一失的，它只适用于简单的 url。我个人会选择服务器端解决方案。

为了演示，我设置了一个小小提琴：http://jsfiddle.net/RyHse/