navbar - making only one tab active with css [closed]

问题

Is there any example of making only one tab active on click with pure CSS without any JS?

回答1:

Yes. Check out the pure CSS way:

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>

For only one single active at a time:

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>

来源：https://stackoverflow.com/questions/31908408/navbar-making-only-one-tab-active-with-css

标签

html

css

twitter-bootstrap

css3

navbar