CSS tabs using href - html

Question

In school we had about 5 minutes left, so I decided to go on W3Schools on random tutorials. And found CSS tab tutorial. It was something like:
span {display: none;}
span:active {display: block;}
Basically, when: <a href="#menu1"> was clicked, it would display: block the element that it has in href meaning, menu 1 would be displayed. The way it was made was somehow that you could add new ones easily, by adding new #id then putting div with that id, nothing had to be changed in CSS. It was about 10-20 lines in CSS too. Anyone know? I seriously need it. There was no JavaScript involved, or JQuery or anything like that.

Answer 1

I'm not sure if I understand your question right, but that sounds for the target technic for me. With CSS3 there is the :target Parameter available. With that you can add a css state, when they're selected via an anchor.
Here is a really simple example, what's the trick behind that.
#contents div {
border: 1px black dotted;
display: none; //hides all div elements
}
#contents div:target {
display: block; //shows the selected div (target)
}
<div id="tabs">
<div id="menu">
Menu 1
Menu 2
Menu 3
Menu 4
</div>
<div id="contents">
<div id="content1">Suspendisse potenti. Mauris in lacinia.</div>
<div id="content2">Pellentesque pulvinar venenatis ante in.</div>
<div id="content3">Vestibulum a nisi viverra, hendrerit.</div>
<div id="content4">Nullam leo ipsum, euismod sed.</div>
</div>
</div>

Answer 2

There's no way of doing this without javascript. Active is a pseudo class meaning it represents the state of an element. That state would need to be set initially or you'd have to add a class of active which again would require javascript to add and remove. Maybe, your tacher didn't discuss the javascript part with you but here is a link that will show you how to do what you are looking for.
http://www.w3schools.com/w3css/w3css_tabulators.asp
EDIT:
Well i did find this js fiddle https://jsfiddle.net/eu81273/812ehkyf/ that is apparently css only. He is actually using input fields and using the 'checked' state which can be set initially in html. So check that out

Answer 3

here you got href:#img1 active view
html,body {
font-family: 'Raleway', sans-serif;
padding: 0 2em;
font-size: 18px;
background: #222;
color: #aaa;
text-align:center;
}
h1 {
font-size: 3em;
font-weight: 200;
margin: 0.5em 0 0.2em 0;
}
p {
margin: 1.5em 0;
color: #888;
}
.italic { font-style: italic; }
.small { font-size: 0.8em; }
/** LIGHTBOX MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display: none;
/** Position and style */
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img {
/** Pad the lightbox image */
max-width: 90%;
max-height: 80%;
margin-top: 2%;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
/** Unhide lightbox **/
display: block;
}
<!-- Lightbox usage markup -->
<link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
<h1>Pure CSS Lightbox</h1>
<p>Click the thumbnail below to activate the lightbox</p>
<!-- thumbnail image wrapped in a link -->
<a href="#img1">
<img src="https://c3.staticflickr.com/8/7315/28008413826_696528d68c.jpg " height="100" width="100" >
</a>
<!-- lightbox container hidden with CSS -->
<a href="#_" class="lightbox" id="img1">
<img src="https://c3.staticflickr.com/8/7315/28008413826_696528d68c.jpg">
</a>
<p class="italic small">Image credit: Me</p>
live demo