Navbar - Making Only One Tab Active With Css

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

Solution 1:

Yes. Check out the pure CSS way:

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

<ul><li><label><inputtype="checkbox" /><a>Item 1</a></label></li><li><label><inputtype="checkbox" /><a>Item 2</a></label></li><li><label><inputtype="checkbox" /><a>Item 3</a></label></li><li><label><inputtype="checkbox" /><a>Item 4</a></label></li><li><label><inputtype="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;}
ulli {display: inline-block; margin: 0; padding: 0; list-style: none;}
ulliinput {display: none;}
ullia {text-decoration: none; border: 1px solid #ccc; padding: 3px10px; line-height: 1; color: #333; cursor: pointer;}
ullia:hover,
ulliinput:checked + a {background-color: #999; color: #fff;}

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