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。在其子元素导航内容的层级比拼中,“子凭父贵”,父元素层级高的,其导航内容在重叠状态中显示在最上面