～遗憾 2022-09-16 23:03 采纳率: 80%
浏览 25
已结题

Js鼠标事件，如何制作一个单选题？

制作一个选择题，鼠标点击任意选项，这个选项字体颜色发生变化。只能使用html5+css3+js。

img

  • 写回答

1条回答 默认 最新

  • EvaY_Yang 2022-09-19 15:05
    关注
    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            p{
                /* 鼠标变小手 */
                cursor: pointer;
            }
             /* 选中后的样式 */
            .active{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="til">
            <p>第一题</p>
            <p>我国的国歌是谁作词的？</p>
            <p id="a" onclick="OptionClick('1')">A.聂耳</p>
            <p id="b" onclick="OptionClick('2')">B.田汉</p>
            <p id="c" onclick="OptionClick('3')">C.聂耳</p>
            <p id="d" onclick="OptionClick('4')">D.聂耳</p>
        </div>
    </body>
    <script type="text/javascript">
        function OptionClick(index){
            var obj1 = document.querySelector('#a')
            var obj2 = document.querySelector('#b')
            var obj3 = document.querySelector('#c')
            var obj4 = document.querySelector('#d')
            if(index == '1'){
                obj1.classList.add("active");
                obj2.classList.remove("active");
                obj3.classList.remove("active");
                obj4.classList.remove("active");
            }
            if(index == '2'){
                obj2.classList.add("active");
                obj1.classList.remove("active");
                obj3.classList.remove("active");
                obj4.classList.remove("active");
            }
            if(index == '3'){
                obj3.classList.add("active");
                obj1.classList.remove("active");
                obj2.classList.remove("active");
                obj4.classList.remove("active");
            }
            if(index == '4'){
                obj4.classList.add("active");
                obj1.classList.remove("active");
                obj2.classList.remove("active");
                obj3.classList.remove("active");
            }
        }
    </script>
</html>
你可以试一试！
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 9月29日
  • 已采纳回答 9月21日
  • 修改了问题 9月18日
  • 修改了问题 9月17日
  • 展开全部

悬赏问题

  • ¥15 全部备份安卓app数据包括密码，可以复制到另一手机上运行
  • ¥15 Python3.5 相关代码写作
  • ¥20 测距传感器数据手册i2c
  • ¥15 RPA正常跑，cmd输入cookies跑不出来
  • ¥15 求帮我调试一下freefem代码
  • ¥15 matlab代码解决，怎么运行
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题：提取2个图像的变量作为另外一个图像像元的移动量，计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法，照着压缩包里边，参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗