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

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

替换一下

tab标签做为一个div（以下 称 tdiv）

里面是ul li 结构

内容作为另一个div (以下称 cdiv)

原理就是让 tdiv 成为非标准流！

具体做法，

先让两个div上下并在一起，

cdiv都有边框！

tdiv没有下边框！

然后

tdiv上的css加入(加入边框宽度为1px)

position:relativetop:1px

意思就是让tdiv成为非标准流，并且是相对定位，top:-1px

就是让tdiv从原来的位置向下偏移 1px

当点击tab的时候，就用js让激活的tab（也就是li)拥有下边框，并且为白色!

效果就出来了

其实就是白色的边框挡住了cdiv蓝色的边框

---