标签信息显示为正文中各部分的链接

时间:2014-06-20 20:56:29

标签: html css tabs

我正试图在我身体的一个部分制作标签,但它并没有显示为标签,而只是链接到文本的各个部分。

<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>

在CSS中我有这个:

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

div.tabs #tabsnav li{
display: inline;
}

我是标签新手,所以如果有人可以向我提出任何关于如何让它们显示的提示,以便一次只能看到一个标签,我们将非常感激。

1 个答案:

答案 0 :(得分:0)

我相信您需要在CSS http://www.sitepoint.com/css3-tabs-using-target-selector/

中使用:target选择器