html - tab information showing up as links to sections in the body -

html - tab information showing up as links to sections in the body -

i'm attempting create tabs in section in body, it's not showing tabs, rather links sections of text.

<div class="tabs"> <ul id="tabsnav" data-tab> <li class="selected"><a href="#tab-1">tab one</a></li> <li><a href="#tab-2">tab two</a></li> <li><a href="#tab-3">tab three</a></li> <li><a href="#tab-4">tab four</a></li> </ul> </div> <div id="tab-1"> <p> tab 1</p> </div> <div id="tab-2"> <p> tab 2.</p> </div> <div id="tab-3"> <p> tab 3.</p> </div> <div id="tab-4"> <p> tab 4.</p> </div>

in css have this:

div.tabs #tabsnav { list-style-type: none; float: left; text-align: left; margin: 60px; background: #000000; width:300px; } div.tabs #tabsnav li{ display: inline; }

i'm new tabs, if throw me hints how create them show 1 tab visible @ time, appreciated.

i believe need utilize :target selector in css http://www.sitepoint.com/css3-tabs-using-target-selector/

html css tabs