使用Html+Css+js技术编写一个完整的tab切换效果的页面，效果如下所示：

html-css020

使用Html+Css+js技术编写一个完整的tab切换效果的页面，效果如下所示：,第1张

<script type="text/javascript">

function tabSwitch2(_this,content_prefix,active) { 

var tabs = document.getElementsByName(_this.name) 

var number = tabs.length 

for (var i=0 i < number i++) { 

var tab = tabs[i] 

tab.className = ""

tab.parentNode.className = ''

document.getElementById(content_prefix+i).style.display = 'none' 

} 

_this.className = "easytab_active" 

document.getElementById(content_prefix+active).style.display = 'block'

tabs[active].style.className = 'easytab_active'

tabs[active].parentNode.className = 'li1'

} 

</script>

替换一下

导航条的功能就是点击导航标题时，显示对应的导航内容。如果使用伪类hover实现类似效果，使用第一种布局方式语义布局比较合适。

由于在语义布局中，三个导航内容是处于重叠的状态。移入其父元素.navI时，触发鼠标的hover态，给父元素添加样式为position:relativez-index:1

从而提升了层级z-index。在其子元素导航内容的层级比拼中，“子凭父贵”，父元素层级高的，其导航内容在重叠状态中显示在最上面

CSS 3 选择器加入了一个叫 :target 的伪类，它的作用是选中id与地址栏中#匹配的元素。如下：

html:

<a href="#tab1">tab1</a>

<a href="#tab2">tab2</a>

<div id="tab1">...</div>

<div id="tab2">...</div>

css:

div { display: none }

div:target { display: block }

当用户点击第一个链接的时候，地址栏会变成：http://.......#tab1，此时会显示id为tab1的div，点击第二个链接的时候，地址栏会变成：http://......#tab2，此时会显示id为tab2的div。