项目笔记：点击按钮后使其保持点击时的状态

最新推荐文章于 2024-08-13 17:22:33 发布

SGM222

最新推荐文章于 2024-08-13 17:22:33 发布

阅读量4k

点赞数 1

本文链接：https://blog.csdn.net/sgm222/article/details/58645467

版权

在Web开发时，有不少选项卡切换的实例，当点击一个选项卡时要使其一直保持点击时的状态，直到点击下一个选项卡切换到另一个选项卡才改变按钮颜色，之前在项目中有遇到这样的问题，现在将几种方法做一总结。

多个选项卡切换

1.使用原生JS切换style

给每一个按钮添加一个点击事件，每个按钮传入函数的参数不一样，JS中利用传入的参数判断是哪个按钮发生点击事件，然后改变按钮的style

<body>
<div class="main">
<button id="b1" οnclick="buttonclick(1)">button1</button>
<button id="b2" οnclick="buttonclick(2)">button2</button>
</div>
</body>

但是这种方法对于选项卡较多的不适用，代码太复杂，不推荐使用

2.JQuery取消当前选项卡的mouseout()和mouseover()事件

首先init()函数初始化button,并且注册按钮点击事件。当有按钮点击时首先初始化所有按钮，然后改变被点击按钮的css，因为click事件触发的同时会触发mouseover()和mouseout()事件，以至于当按钮点击后不能保持点击时的状态，所以在点击函数中取消被点击按钮的mouseover()和mouseout()事件，这样就可以达到效果。

</script>

<body>
<div class="main">
    <button>button1</button>
    <button>button2</button>
    <button>button3</button>
</div>
</body>

在做这种方法的时候有考虑到是不是可以不用取消mouseover()和mouseout()事件，改变按钮的disabled，但是这样的话按钮就会被禁用，不能达到指定的style。

3.setTable鼠标悬浮/点击切换

为一组选项卡编号，setTab(id,cursel,n)函数切换选项卡的class,id为被点击选项卡的id，cursel为选项卡的编号，n为选项卡总数

<body>
<div class="main">
    <button id="b1" οnclick="setTab('b',1,3)">button1</button>
    <button id="b2" οnclick="setTab('b',2,3)">button2</button>
    <button id="b3" οnclick="setTab('b',3,3)">button3</button>
</div>
</body>