div css 实现tabs标签的思路及示例代码

2020-05-07 06:50:20易采站长站整理

<div class=”mod-hd”>
<ul class=”tab-nav”>
<li class=”nav_current” id=”nav1″ onMouseOver=”javascript:doClick(this)”>标签1</li>
<li class=”nav_link” id=”nav2″ onMouseOver=”javascript:doClick(this)”>标签2</li>
<li class=”nav_link” id=”nav3″ onMouseOver=”javascript:doClick(this)”>标签3</li>
<li class=”nav_link” id=”nav4″ onMouseOver=”javascript:doClick(this)”>标签4</li>
<li class=”nav_link” id=”nav5″ onMouseOver=”javascript:doClick(this)”>标签5</li>
<li class=”nav_link” id=”nav6″ onMouseOver=”javascript:doClick(this)”>标签6</li>
<li class=”nav_link” id=”nav7″ onMouseOver=”javascript:doClick(this)”>标签7</li>
</ul>
</div>
<div class=”mod-bd”>
<div class=”dis” id=”sub1″>
标签内容1
</div>
<div class=”undis” id=”sub2″>
标签内容2
</div>
<div class=”undis” id=”sub3″>
标签内容3
</div>
<div class=”undis” id=”sub4″>
标签内容4
</div>
<div class=”undis” id=”sub5″>
标签内容5
</div>
<div class=”undis” id=”sub6″>
标签内容6
</div>
<div class=”undis” id=”sub7″>
标签内容7
</div>
</div>
</div>
</div>
</body>
</html>