设置现有标签的样式看起来像单选按钮

Question

Working on a project that uses legacy code (javascript) and an ecommerece framework for logic which currently uses 'tabs'. 正在处理使用遗留代码（javascript）和电子商务框架的逻辑项目，该框架当前使用“制表符”。 The client decided they now want radio buttons instead of the tabs. 客户决定现在要单选按钮而不是选项卡。

The basic structure is ul > li where the li's are styled and act like tabs with an href and styling classes ect. 基本结构是ul> li，其中li的样式是样式，并且像带有href和style类的选项卡一样起作用。

Rather than trying to re-wire everything to function with a radio button, I am trying to find a way to style the tabs to look like radio buttons. 我没有尝试重新连接所有功能以使单选按钮起作用，而是试图找到一种方法来设置选项卡的样式以使其看起来像单选按钮。 Is it even possible? 可能吗？

Answer 1

I made a link to show you how to do it: 我做了一个链接，向您展示如何做到这一点：

<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 个解决方案

解决方案1
1 已采纳 2017-10-23 19:28:57

设置现有标签的样式看起来像单选按钮

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-10-23 19:28:57

解决方案1
1 已采纳 2017-10-23 19:28:57