Zgniotek Mc Zgniotek Mc - 4 months ago 8
HTML Question

CSS tabs using href

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

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">
        <a href="#content1">Menu 1</a>
        <a href="#content2">Menu 2</a>
        <a href="#content3">Menu 3</a>
        <a href="#content4">Menu 4</a>
    </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>

Comments