选择题动态效果

最新推荐文章于 2024-10-13 23:27:44 发布

白衣折扇枕边人

最新推荐文章于 2024-10-13 23:27:44 发布

阅读量149

点赞数 2

文章标签： java 前端服务器

本文链接：https://blog.csdn.net/weixin_68320295/article/details/140347040

版权

HTML代码

<body>
<form action="" target="" method="get">
    <h2>单选题：今天吃什么？</h2>
    <table border=6 bgcolor="#00ffff" rules="rows"
           bordercolor="#9900ff" width="400" height="160">

        <tr>
            <td width="30">
                <input type="radio" name="food" id="r1">
            </td>
            <td onclick="f(this)">
            A、米饭
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="food" id="r2">
            </td>
            <td onclick="f2(this)">
            B、面条
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="food" id="r3">
            </td>
            <td onclick="f3(this)">
                C、馒头
            </td>
        </tr>
        <tr>
            <td>
                <input type="radio" name="food" id="r4">
            </td>
            <td onclick="f4(this)">
                D、面条
            </td>
        </tr>
    </table>
</form>

</body>

CSS美化一下

<style>
       table{
           width: 200px;
           height: 100px;
       }
       tr:hover{
           background-color: aquamarine;
           transition: 0.5s;
       }
    </style>

hover 鼠标悬停

transition 变换时间实现丝滑的动态效果

效果图：

JS实现点击后边文字，实现选择的效果

   <script>
    function f(o) {
        o.parentElement.firstElementChild.firstElementChild.checked=true
    }
    function f2(o) {
        o.parentElement.firstElementChild.firstElementChild.checked=true
    }
    function f3(o) {
        o.parentElement.firstElementChild.firstElementChild.checked=true
    }
    function f4(o) {
        o.parentElement.firstElementChild.firstElementChild.checked=true
    }
    </script>

思路用ParentElement 找到第一个子类的元素并且用Checked 实现选择功能将文字和选择绑在一起