Question

我需要你的帮助，

我正在使用仅CSS样式的主题菜单，想添加活动选项卡的顶部，左侧和右侧边框，但要取走底部并同时清空标签中的空白。对于此示例，我已经附上了当前结果和所需结果的图片以及相关的CSS和HTML标记。

当前输出：

所需的输出：

CSS：

.tabs {

      display: flex;
      flex-wrap: wrap;
      max-width: 700px;
      background: #efefef;

    }

    .input {
      position: absolute;
      opacity: 0;
    }
    .label {
      width: 100%;
      padding: 20px 30px;
      background: #e5e5e5;
      cursor: pointer;
      font-weight: bold;
      font-size: 18px;
      color: #7f7f7f;
      transition: background 0.1s, color 0.1s;
    }

    .label:hover {
      background: #d8d8d8;
    }

    .label:active {
      background: #ccc;
    }

    .input:focus + .label {
      z-index: 1;
        border-bottom: -2px solid red;
    }

    .input:checked + .label {
      background: #fff;
      color: #000;
    }

    @media (min-width: 600px) {
      .label {
        width: auto;
      }
    }

    .panel {
      display: none;
      padding: 20px 30px 30px;
      background: #fff;
        border: 1px solid green;
    }

    @media (min-width: 600px) {
      .panel {
        order: 99;
      }
    }

    .input:checked + .label + .panel {
      display: block;
    }

HTML：

<div class="tabs">
  <input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
  <label for="tab-1" class="label">Orange</label>
  <div class="panel">
    <h1>Orange</h1>
    <p>The orange (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p>
    <p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations.</p>
  </div>

  <input name="tabs" type="radio" id="tab-2" class="input"/>
  <label for="tab-2" class="label">Tangerine</label>
  <div class="panel">
    <h1>Tangerine</h1>
    <p>The tangerine (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata).</p>
    <p>The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.</p>
  </div>

  <input name="tabs" type="radio" id="tab-3" class="input"/>
  <label for="tab-3" class="label">Clemantine</label>
  <div class="panel">
    <h1>Clemantine</h1>
    <p>A clementine (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to tangerines, they tend to be easy to peel.</p>
  </div>
</div>

Answer 1

我将使用相对位置来重叠选项卡按钮和选项卡内容。这样，您可以将选项卡内容的顶部边框隐藏在选项卡按钮的后面。这有点棘手，但可以：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        .tabs {
            display: flex;
            flex-wrap: wrap;
            max-width: 700px;
            background: #efefef;
        }
        
        .input {
            position: absolute;
            opacity: 0;
        }
        .label {
            width: 100%;
            padding: 20px 30px;
            background: #e5e5e5;
            cursor: pointer;
            font-weight: bold;
            font-size: 18px;
            color: #7f7f7f;
            transition: background 0.1s, color 0.1s;
        }
        
        .label:hover {
            background: #d8d8d8;
        }
        
        .label:active {
            background: #ccc;
        }
        
        .input:focus + .label {
            z-index: 1;
            border-bottom: -2px solid red;
        }
        
        .input:checked + .label {
            background: #fff;
            color: #000;
            border: 1px solid green;
            border-bottom-color: white;
            position: relative;
            z-index: 1;
        }
        
        @media (min-width: 600px) {
            .label {
                width: auto;
            }
        }
        
        .panel {
            display: none;
            padding: 20px 30px 30px;
            background: #fff;
            border: 1px solid green;
        }
        
        @media (min-width: 600px) {
            .panel {
                order: 99;
            }
        }
        
        .input:checked + .label + .panel {
            display: block;
            position: relative;
            top: -1px;
            z-index: 0;
        }

    </style>
</head>
<body>
    
    <div class="tabs">
        <input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
        <label for="tab-1" class="label">Orange</label>
        <div class="panel">
            <h1>Orange</h1>
            <p>The orange (specifically, the sweet orange) is the fruit of the citrus species Citrus × sinensis in the family Rutaceae</p>
            <p>The fruit of the Citrus × sinensis is considered a sweet orange, whereas the fruit of the Citrus × aurantium is considered a bitter orange. The sweet orange reproduces asexually (apomixis through nucellar embryony); varieties of sweet orange arise through mutations.</p>
        </div>
        
        <input name="tabs" type="radio" id="tab-2" class="input"/>
        <label for="tab-2" class="label">Tangerine</label>
        <div class="panel">
            <h1>Tangerine</h1>
            <p>The tangerine (Citrus tangerina) is an orange-colored citrus fruit that is closely related to, or possibly a type of, mandarin orange (Citrus reticulata).</p>
            <p>The name was first used for fruit coming from Tangier, Morocco, described as a mandarin variety. Under the Tanaka classification system, Citrus tangerina is considered a separate species.</p>
        </div>
        
        <input name="tabs" type="radio" id="tab-3" class="input"/>
        <label for="tab-3" class="label">Clemantine</label>
        <div class="panel">
            <h1>Clemantine</h1>
            <p>A clementine (Citrus ×clementina) is a hybrid between a mandarin orange and a sweet orange, so named in 1902. The exterior is a deep orange colour with a smooth, glossy appearance. Clementines can be separated into 7 to 14 segments. Similarly to tangerines, they tend to be easy to peel.</p>
        </div>
    </div>

</body>
</html>

我只修改这两组规则：

.input:checked + .label {
    background: #fff;
    color: #000;
    border: 1px solid green;
    border-bottom-color: white;
    position: relative;
    z-index: 1;
}

.input:checked + .label + .panel {
    display: block;
    position: relative;
    top: -1px;
    z-index: 0;
}

更改活动CSS标签的样式和顶部颜色

2 个答案: