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

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

img


<!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>
你可以试一试！