設置現有標簽的樣式看起來像單選按鈕

Question

正在處理使用遺留代碼（javascript）和電子商務框架的邏輯項目，該框架當前使用“制表符”。 客戶決定現在要單選按鈕而不是選項卡。

基本結構是ul> li，其中li的樣式是樣式，並且像帶有href和style類的選項卡一樣起作用。

我沒有嘗試重新連接所有功能以使單選按鈕起作用，而是試圖找到一種方法來設置選項卡的樣式以使其看起來像單選按鈕。 可能嗎？

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 個解決方案

解決方案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