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

html-css011

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