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

html-css013

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

替换一下

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蓝色的边框

人民币就算了,丢不起这个份儿啊

在 HTML 里直接使用 CSS 和 JS,你只需要把 CSS 和 JS 文件里的代码复制到 HTML 代码的 <head></head>中间即可,最后应该是这样的

<head>

.

.

.

head 里面的其他标记

.

.

.

<style type="text/css">

    把 CSS 代码复制到这里

</style>

<script type="text/javascript" language="javascript">

<!--

    把 JS 代码复制到这里

-->

</script>

</head>