导航栏 - 使用 css 仅激活一个选项卡 [关闭]答案

【问题标题】：navbar - making only one tab active with css [closed]导航栏 - 使用 css 仅激活一个选项卡 [关闭]
【发布时间】：2015-08-09 20:12:58
【问题描述】：

有没有任何使用纯 CSS 没有任何 JS 的点击时只激活一个标签的例子？

【问题讨论】：

标签： html twitter-bootstrap css navbar

【解决方案1】：

是的。查看纯 CSS 方式：

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;}

<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>

一次只有一个活动：

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;}

<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>

【讨论】：

是否有任何已经内置的引导导航栏？ @Praveen Kumar
@ronmar Nopes... 还没有。