正在开发一个使用遗留代码(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/
关于javascript - 现有选项卡的样式看起来像单选按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46896466/