～遗憾 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 fluent的在模拟压强时使用希望得到一些建议
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题：我现在在做一个墨水屏设计，2.9英寸的小屏怎么换4.2英寸大屏
  • ¥15 模糊pid与pid仿真结果几乎一样
  • ¥15 java的GUI的运用
  • ¥15 Web.config连不上数据库
  • ¥15 我想付费需要AKM公司DSP开发资料及相关开发。
  • ¥15 怎么配置广告联盟瀑布流
  • ¥15 Rstudio 保存代码闪退