Question

处理使用遗留代码（javascript）的项目和当前使用＆＃39;标签的逻辑的ecommerece框架。客户决定他们现在想要单选按钮而不是标签。

基本结构是ul>李的样式，并且像一个带有href和样式类的标签。

我试图找到一种方法来将标签设置为单选按钮，而不是尝试使用单选按钮重新连接所有功能。它甚至可能吗？

Answer 1

我建立了一个链接，告诉你如何做到这一点：

<body>
  <ul>
    <li><div class="middle"></div></li>
    <li><div class="middle"></div></li>
    <li><div class="middle"></div></li>
   </ul>
</body>

 li {
    display: inline-block;
    height: 20px;
    width: 20px;
    border: 1px solid black;
    border-radius: 50%
 }
.middle {
    height: 10px;
    width: 10px;
    background: black;
    margin:5px;
    border-radius: 50%;
    visibility: hidden;
}

 $(document).ready(function () {
        $('li').on('click', function () {
            $('.middle').css({
                'visibility': 'hidden'
            })
            $(this).children().css({
                'visibility': 'visible'
            });
        });
    });

https://jsfiddle.net/2zavkjjf/

样式化现有选项卡看起来像单选按钮

1 个答案: