Javascript 设置现有选项卡的样式类似于单选按钮_Javascript_Html_Radio Button

Javascript 设置现有选项卡的样式类似于单选按钮

javascript html

Javascript 设置现有选项卡的样式类似于单选按钮,javascript,html,radio-button,Javascript,Html,Radio Button,致力于一个使用遗留代码javascript的项目，以及一个目前使用“选项卡”的电子商务逻辑框架。客户决定他们现在想要单选按钮而不是标签基本结构是ul>li，其中li的样式和行为类似于带有href和样式类等的选项卡我不是试图用单选按钮重新连接所有功能，而是试图找到一种方法，将选项卡的样式设置为单选按钮。甚至可能吗？我制作了一个链接，向您展示如何做到这一点： <body> <ul> <li><div class="middle"><

致力于一个使用遗留代码javascript的项目，以及一个目前使用“选项卡”的电子商务逻辑框架。客户决定他们现在想要单选按钮而不是标签

基本结构是ul>li，其中li的样式和行为类似于带有href和样式类等的选项卡

我不是试图用单选按钮重新连接所有功能，而是试图找到一种方法，将选项卡的样式设置为单选按钮。甚至可能吗？

我制作了一个链接，向您展示如何做到这一点：

<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/

看看这支笔，这个人做了一些可能对你有用的事情，谢谢，但它使用单选按钮，只是重新设计了它们的样式。我想让一些东西看起来像一个单选按钮，而不是一个。