js tab滑动切换

JavaScript09

js tab滑动切换,第1张

楼主的这个代码我看不太懂

是经过压缩的

楼主看下这个代码，经过修改应该可以的

http://www.lanrentuku.com/js/biaoqian-598.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Tab效果</title>

<style type="text/css">

ul{

list-style: none

}

*{

margin: 0

padding: 0

}

#tab{

border: 1px solid #ccc

margin: 20px auto

width: 403px

border-top: none

}

.list ul{

overflow: hidden

}

.list li{

float: left

}

.list li{

padding-left: 28px

padding-right: 28px

padding-top: 6px

padding-bottom: 6px

border: 1px solid #ccc

background: -moz-linear-gradient(top, #FEFEFE, #EDEDED)

background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed))

border-right: none

cursor: pointer

}

#listCon{

height: 100px

}

#listCon div{

padding:10px

position:absolute

opacity:0

filter:alpha(opacity=0)

}

.list li:first-child{

border-left: none

}

.list li:hover{

background: #fff

border-bottom: none

}

.list li.cur{

background: #fff

border-bottom: none

}

#listCon div.cur{

opacity:1

filter:alpha(opacity=100)

}

</style>

</head>

<body>

<div id="tab">

<div>

<ul>

<li>许嵩</li>

<li>周杰伦</li>

<li>林俊杰</li>

<li>陈奕迅</li>

</ul>

</div>

<div id="listCon">

<div>断桥残雪、千百度、幻听、想象之中</div>

<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>

<div>被风吹过的夏天、江南、一千年以后</div>

<div>十年、K歌之王、浮夸</div>

</div>

</div>

<script type="text/javascript">

window.onload = function(){

var oDiv = document.getElementById("tab")

var lis = oDiv.getElementsByTagName("li")

var oDivCon = document.getElementById("listCon")

var lisDiv = oDivCon.getElementsByTagName("div")

for(var i=0i<lis.lengthi++){

lis[i].index = i

lis[i].onmouseover = function(){

show(this.index)

}

}

function show(a){

for(var j=0j<lis.lengthj++){

lis[j].className = ""

lisDiv[j].className = ""

}

lis[a].className = "cur"

lisDiv[a].className = "cur"

}

}

</script>

</body>

</html>

<h2

class="hotNewsTit02"><span

class="fl"><a

href="#"

class="hover_style"

id="tab1_1"

onmouseover="tab(1,2,1)">最近更新</a><a

href="#"

id="tab1_2"

onmouseover="tab(1,2,2)">资讯快报</a></span><span

class="frbor"><a

href="#">单证试听</a><a

href="#">单证网校辅导</a></span></h2>

//

JavaScript

Document

/**position

第N个用到tab的地方

*

sum

该tab下有多少个小tab来回切换

*

now

当前tab下的第几个子tab

*/

function

tab(position,sum,now){

for(i=1i<=sumi++){

$("#tab"+position+"_"+i).removeClass("hover_style")

$("#tab"+position+"_"+i).removeClass("a1")

$("#tab"+position+"_c"+i).css("display","none")

}

$("#tab"+position+"_"+now).addClass("hover_style")

$("#tab"+position+"_"+now).addClass("a1")

$("#tab"+position+"_c"+now).css("display","block")

}