button点击切换，获取按钮ID

最新推荐文章于 2022-08-08 14:03:47 发布

weixin_33743703

最新推荐文章于 2022-08-08 14:03:47 发布

阅读量937

点赞数

CC 4.0 BY-SA版权

文章标签： python 移动开发 c/c++

原文链接：http://www.cnblogs.com/thiaoqueen/p/6905540.html

本文提供了一个使用HTML和JavaScript实现的按钮交互示例，通过不同的按钮选择，可以切换按钮的状态并获取当前选中的按钮ID。

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

<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
    .sms-type button{
    width: 60px;
    height: 30px;
    margin-right: 10px;
    border: #d0d0d0 1px solid;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    outline: none;
    cursor: pointer;
}
.sms-type button.on-sel{
    border: #ff7e0e 1px solid;
    background-color: #fff0c5;
}
    </style>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script type="text/javascript">
            function  replyDetailClick(){
            $(".reply-details .sms-type button").click(function(){
            $(".reply-details .sms-type button").removeClass("on-sel");
            $(this).addClass("on-sel");
        })
    }
            function getButtonId(){
            $(".sms-type button").click(function(){    
                    var buttonId = $(this).attr("id");
                    alert("buttonId："+buttonId);
                });
    }
    
            $(document).ready(function() {   
                replyDetailClick();
                getButtonId();
              });
    </script>
    
</head>
<body>
<div class="reply-details">
            <div>
                <label class="sms-type">
                    <button  id="all" class="on-sel">全部</button>
                    <button id="one">1</button>
                    <button id="two">2</button>
                    <button id="three">3</button>
                    <button id="other">其他</button>
                </label>
            </div>
        </div>
</body>
</html>