按下javascript后突出显示一个按钮

Question

我试图使用html / css和一些javascript制作简单的图片库。它全部正常工作，但只有一个功能。

当我打开index.html＆＃39; All＆＃39;我的自定义样式已经突出显示，如果按下另一个按钮突出显示将转到该特定按钮。

按钮的html看起来像这样

<input type='button' value='Design' class="cat-itiem" id='filterDesign'>

编辑：我最终使用OnResolve's method并且效果很好！（即使对于不了解任何JS的人也是如此）感谢大家的帮助：）

Answer 1

假设您突出显示的类名为activeButton，您可以使用jQuery

执行以下操作

$(function () {
    $(".cat-itemem").click(function () {
        $(".cat-itemem").removeClass('activeButton');
        $(this).addClass('activeButton');
    }
})

Answer 2

你可以通过纯css在按钮点击上添加样式，但是为了取消其他你需要javascript的颜色。

<强> HTML：

    <input type='button' value='All' class="cat-itiem highlighted" id='filterAll'>
    <input type='button' value='Design' class="cat-itiem" id='filterDesign'>
    <input type='button' value='Logo' class="cat-itiem" id='filterLogo'>
<input type='button' value='Photography' class="cat-itiem" id='filterPhotography'>

CSS （添加你的）

.cat-itiem{}

.highlighted{background:green}

JS （使用Jquery）

$('.cat-itiem').click(function(){$('.cat-itiem').removeClass('highlighted'); $(this).addClass('highlighted')}

Answer 3

我用简单的jQuery为你创建了一个jsfiddle的例子。您可以看到每个方面（标记，CSS和jquery）。

http://jsfiddle.net/p5ZUv/7/