按钮：使用JavaScript和CSS激活

尝试使简单的按钮在点击时处于活动的不同样式。我使用HTML来设计按钮，样式为CSS，并希望使用一些JavaScript来实现。按钮：使用JavaScript和CSS激活

SO环顾四周，发现有很多不同的方法，如使用复选框使纯CSS，或jQuery的，或JavaScript一个按钮后，我觉得JavaScript的是，我期待在最贴近的方式。

HTML

<button type="button" class="btn" id="btn1">Details</button>

CSS

.btn { 
    background: #3498db; 
    border-radius: 0px; 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 12px; 
    padding: 2px 2px 2px 2px; 
    text-decoration: none; 
    height: 30px; 
    width: 70px; 
    margin-top: 5px; 
    margin-bottom: 5px; 
    display: block; 
} 

.btn:active { 
    background: #cecece; 
    text-decoration: none; 
}

的JavaScript

$('.btn').click(function(){ 
    if($(this).hasClass('active')){ 
     $(this).removeClass('active') 
    } else { 
     $(this).addClass('active') 
    } 
});

这里是一个的jsfiddle链接：http://jsfiddle.net/w5h6rffo/

广告ditional Note
功能目标是让多个按钮具有相同的类别，但每个按钮都会调用不同的功能。我的函数调用的工作，只是没有按钮留在当第一次按下它的活动状态，然后在非激活状态时，再次按下

来源

2015-12-09 axchink

你接近这样做是正确，你使用的检查，看看你的元素具有active类是好的，但jQuery有一个toggleClass()功能，让你刚建机制写：

$('.btn').click(function() { 
    $(this).toggleClass('active'); 
});

然后在你的CSS，而不是造型的伪:active您将使用一个类的名称，而不是像这样：

.btn.active { 
    background: #cecece; 
    text-decoration: none; 
}

~~你还需要从产品总数的CSS删除 :active选择，因为你将不再需要它~~ :)

由于dfsq指出存在保留:active一定值假想选择器：

我只是认为活动状态（：活动）的控制元素是重要。例如，如果没有它，按钮将看起来是相同的，如果它被按下但不被点击（鼠标悬停之前的鼠标悬停）。 UX有点更好：：active。 ~~但也许我太挑剔~~

出于这个原因，你可能要修改的选择是：

.btn.active, .btn:active { 
    background: #cecece; 
    text-decoration: none; 
}

因为这会影响双方的.active和:active状态。

来源

2015-12-09 18:55:42 SidOfc

*“你也想从你的CSS中移除：active selector所有，因为你不会再需要它了“*。不，它**实际上仍然是需要的。 .active和：active都是必需的。效果更好。 – dfsq

d'oh！你的回答击败了我大约40秒。 – David

@dfsq这绝对不是必需的，它只会在用户使用基于标签的导航而不是鼠标时有所不同，因为效果看起来不会更好，而是完全相同**所以*是的，你__can__删除'：active'选择器* – SidOfc

你可以使用classList.toggle（）连接到.active类。

所以您的代码会是这个样子：

<!DOCTYPE HTML> 
<html> 
    <head> 
     <style> 
     .btn { 
      background: #3498db; 
      border-radius: 0px; 
      font-family: Arial; 
      color: #ffffff; 
      font-size: 12px; 
      padding: 2px 2px 2px 2px; 
      text-decoration: none; 
      height: 30px; 
      width: 70px; 
      margin-top: 5px; 
      margin-bottom: 5px; 
      display: block; 
     } 

     .btn.active { 
      background: #cecece; 
      text-decoration: none; 
     } 
     </style> 
    </head> 
    <body> 
     <button class="btn">Button</button> 
     <button class="btn">Button</button> 
     <button class="btn">Button</button> 
     <button class="btn">Button</button> 
    </body> 
    <script> 
     function toggleActiveState() { 
      this.classList.toggle('active'); 
     } 
     var btns = document.querySelectorAll('.btn'); 
     [].forEach.call(btns, function(btn) { 
      btn.addEventListener('click', toggleActiveState, false); 
     }); 
    </script> 
</html>

这种形式给出了将工作按钮的无限数量。

来源

2015-12-09 18:49:33

的OP是使用jQuery，这只是增加了一个活跃状态**每次**它被点击并且在再次单击时不会删除它。 – SidOfc

现在它确实切换了课程。为什么当vanilla JavaScript执行这项工作时，你更喜欢使用jQuery？ –

由于OP已经在使用jQuery，所以第二个原因是他也已经在使用无阻碍的方法，这使得你的HTML比你拥有的更加灵活。假设你有更多的元素你不得不在服务器端或HTML上添加onclick，如果你在JS中这样做，你不必这样做，因为处理器只是监听一个它必须绑定的类至。 – SidOfc

您可以使用jQuery的toggleClass（className）函数。

http://api.jquery.com/toggleclass/

<script> 
    $("button.btn").click(function() { 
     $(this).toggleClass("active"); 
    }); 
</script> 

<style> 
    .active{ 
     // your active style 
    } 
<style>

来源

2015-12-09 18:54:40

请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/:active现在发生的事情是它工作得很好:-)但是你要求它做什么以及你想要它做什么并不是一回事。

我认为你需要修复你的CSS和定义active为一类，而不是一个伪类（未经测试，但在这里不用）：

.active { 
    background: #cecece; 
}

来源

2015-12-09 18:56:23 David

@dfsq你是对的，删除我的评论。 – SidOfc

谢谢你的回答，但这是西德尼在下面写的同样的答案（他的速度更快），我仍然会按upvote，谢谢:) – axchink

按钮：使用JavaScript和CSS激活

回答

相关问题