圆形切换按钮

最新推荐文章于 2023-01-08 20:05:25 发布

坐着牛车写代码

最新推荐文章于 2023-01-08 20:05:25 发布

阅读量409

点赞数

分类专栏： WEB 前台页面文章标签： HTML

本文链接：https://blog.csdn.net/jiangxue1992/article/details/46532901

版权

WEB 前台页面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

圆形按钮求换效果，每一个圆形按钮是一个div

<div style="height: 45px; border-bottom: 1px solid #ABABAB; background-color: white; width: 828px; margin-left: -15px;">
    <div id="cm1" class="navcircle-active" οnmοuseοver="this.style.cursor='pointer'" οnclick="menuclick(this)">
        <label id="lt1" οnmοuseοver="this.style.cursor='pointer'" class="navcircle-text">
            个人<br />
            信息
        </label>
    </div>
    <div id="cm2" class="navcircle-inactive" οnmοuseοver="this.style.cursor='pointer'" οnclick="menuclick(this)">
        <label id="lt2" οnmοuseοver="this.style.cursor='pointer'" class="navcircle-text">
            个人<br />
            观点
        </label>
    </div>
</div>
 <!-- 圆形按钮 -->

   <script type="text/javascript">


            //圆形按钮
            function menuclick(em) {
                var cm1 = document.getElementById('cm1');
                var cm2 = document.getElementById('cm2');
                var page1 = document.getElementById('page1');
                var page2 = document.getElementById('page2');
                cm1.style.background = '#ABABAB';
                cm2.style.background = '#ABABAB';
                page1.style.display = "none";
                page2.style.display = "none";
                if (em == cm1 || em == lt1) {
                    em.style.background = 'RGB(192, 60, 205)';
                    document.getElementById('page1').style.display = "block";
                } else if (em == cm2) {
                    em.style.background = 'RGB(192, 60, 205)';
                    document.getElementById('page2').style.display = "block";
                }
            }

        </script>