[JavaScript]滑动开关按钮效果

最新推荐文章于 2022-01-04 15:29:28 发布

置顶 xcl522

最新推荐文章于 2022-01-04 15:29:28 发布

阅读量2.4k

点赞数

本文链接：https://blog.youkuaiyun.com/xcl522/article/details/41011939

版权

本文介绍如何利用JavaScript创建一款滑动开关按钮。通过HTML结构定义开关样式，结合JavaScript实现按钮状态切换的交互效果。提供了完整的代码示例，包括HTML和JavaScript部分，帮助读者快速理解和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

HTML结构：

<div class="boxwrap fr"><!--容器 开始-->
            <div class="switchBox fl" id="timeList" typeId="time">
            <table  cellpadding="0" cellspacing="0">
                <tr>
                    <td class="switch_box_l"></td>
                    <td class="switch_box_c rel">
                            <span class="abs switchBtn" >
                                <i class="switchBtn-l"></i>
                                <i class="switchBtn-r"></i>
                                <span class="curTxt">24小时</span>
                            </span>
                            <a href="javascript:void(0);" class="swichTxt" id="24" >24小时</a>
                            <a href="javascript:void(0);" class="swichTxt" id="48">48小时</a>
                            <a href="javascript:void(0);" class="swichTxt" id="72">72小时</a>
                    </td>
                    <td class="switch_box_r"></td>
                </tr>
            </table>
        </div>
        <div class="switchBox fl" id="cityList" typeId="city">
            <table  cellpadding="0" cellspacing="0">
                <tr>
                    <td class="switch_box_l"></td>
                    <td class="switch_box_c rel">
                            <span class="abs switchBtn" >
                                <i class="switchBtn-l"></i>
                                <i class="switchBtn-r"></i>
                                <span class="curTxt">城市</span>
                            </span>
                            <a href="javascript:void(0);" class="swichTxt" id="city">城市</a>
                            <a href="javascript:void(0);" class="swichTxt" id="station">站点</a>
                    </td>
                    <td class="switch_box_r"></td>
                </tr>
            </table>
        </div>
        </div><!--容器 结束-->

初始化函数：

/*@.boxwrap :滑动按钮父容器，同一界别的滑动按钮必须包含在同一个容器中
 *@loadData :点击按钮后回调函数
 *@#frameMain : 加载内容的iframe Id
 *@tab.html : 提交参数的页面
 */
loadSwitchBox('.boxwrap',loadData,'#frameMain','tab.html');

完整demo：

HTML: