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

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

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

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

1 个答案: