[Solved] navbar – making only one tab active with css [closed]

by


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>

2

solved navbar – making only one tab active with css [closed]