javascript – 保持按钮处于活动状态,直到再次单击为止

2019-07-22 21:35:08 阅读：156 来源： 互联网

我觉得我有一个相对简单的问题,我不知道该怎么做.我有一个按钮类型的html输入标签,它调用了一个javascript onclick函数.这部分工作正常,但我希望能够添加到我的onClick功能,使按钮保持活动状态的能力(以便它保持突出显示,直到再次点击).

有任何想法吗？我试着把注意力集中在它上面,但我认为它不可能有多个按钮焦点,这听起来真的像黑客.

解决方法:

因为你没有代码,我给你一个例子,我希望你有你想要的：

假设这是您的HTML按钮：

<div class="button ">My button</div>

让我们给它一些造型

.button { 
float:left;
color: #333;
width: auto;
text-align: center;
padding: 0 10px;
background: #f0f0f0;
line-height: 1.5em;
height: auto;
}

让我们为您的活动按钮设置样式

.button.active {
background: #ea0000;
color: #fff;
}

现在你要做的就是编写一个小的jquery函数：

<script>
$('.button').click(function(){
    if($(this).hasClass('active')){
        $(this).removeClass('active')
    } else {
        $(this).addClass('active')
    }
});
</script>

而你在这里;-)

继承人我的小提琴例子：http://jsfiddle.net/S7kJ2/

照顾自己

标签：html,javascript,jquery,css,web
来源： https://codeday.me/bug/20190722/1506846.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 保持按钮处于活动状态,直到再次单击为止