navbar - 只使用css激活一个选项卡

Question

是否有任何示例只使用纯CSS在没有任何JS的情况下单击一个选项卡？

Answer 1

是。看看纯CSS方式：

＆＃13;

＆＃13;

ul {margin: 0; padding: 0; list-style: none; display: block;}
ul li {display: inline-block; margin: 0; padding: 0; list-style: none;}
ul li input {display: none;}
ul li a {text-decoration: none; border: 1px solid #ccc; padding: 3px 10px; line-height: 1; color: #333; cursor: pointer;}
ul li a:hover,
ul li input:checked + a {background-color: #999; color: #fff;}

＆＃13;

<ul>
  <li>
    <label>
      <input type="checkbox" />
      <a>Item 1</a>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      <a>Item 2</a>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      <a>Item 3</a>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      <a>Item 4</a>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" />
      <a>Item 5</a>
    </label>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

一次只有一个活动：

＆＃13;

＆＃13;

ul {margin: 0; padding: 0; list-style: none; display: block;}
ul li {display: inline-block; margin: 0; padding: 0; list-style: none;}
ul li input {display: none;}
ul li a {text-decoration: none; border: 1px solid #ccc; padding: 3px 10px; line-height: 1; color: #333; cursor: pointer;}
ul li a:hover,
ul li input:checked + a {background-color: #999; color: #fff;}

＆＃13;

<ul>
  <li>
    <label>
      <input type="radio" name="a" />
      <a>Item 1</a>
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="a" />
      <a>Item 2</a>
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="a" />
      <a>Item 3</a>
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="a" />
      <a>Item 4</a>
    </label>
  </li>
  <li>
    <label>
      <input type="radio" name="a" />
      <a>Item 5</a>
    </label>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;