【高分求助】DW中用JS实现选项卡特效

JavaScript08

【高分求助】DW中用JS实现选项卡特效,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>简洁Tab</title>

<style type="text/css">

<!--

body {

padding:0

font:12px "宋体"

}

/*Tab1*/

#lib_Tab1 {

width:500px

margin:0px

padding:0px

margin-bottom:15px

}

/*Tab2*/

#lib_Tab2 {

width:576px

margin:0px

padding:0px

margin-bottom:15px

}

.lib_tabborder {

border:1px solid #95C9E1

}

.lib_Menubox {

height:28px

line-height:28px

position:relative

}

.lib_Menubox ul {

margin:0px

padding:0px

list-style:none

position:absolute

top:3px

left:0

margin-left:10px

height:25px

text-align:center

}

.lib_Menubox li {

float:left

display:block

cursor:pointer

width:114px

color:#949694

font-weight:bold

margin-right:2px

height:25px

line-height:25px

background-color:#E4F2FD

}

/* www.codefans.net */

.lib_Menubox li.hover {

padding:0px

background:#fff

width:116px

border-left:1px solid #95C9E1

border-top:1px solid #95C9E1

border-right:1px solid #95C9E1

color:#739242

height:25px

line-height:25px

}

.lib_Contentbox {

clear:both

margin-top:0px

border-top:none

height:181px

text-align:center

padding-top:8px

}

-->

</style>

<script>

<!--

function setTab(name,cursel,n){

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

var menu=document.getElementById(name+i)

var con=document.getElementById("con_"+name+"_"+i)

menu.className=i==cursel?"hover":""

con.style.display=i==cursel?"block":"none"

}

}

//-->

</script>

</head>

<body>

<div id="lib_Tab1">

<div class="lib_Menubox lib_tabborder">

<ul>

<li id="one1" onclick="setTab('one',1,4)" class="hover">ASP</li>

<li id="one2" onclick="setTab('one',2,4)" >PHP</li>

<li id="one3" onclick="setTab('one',3,4)">.NET</li>

<li id="one4" onclick="setTab('one',4,4)">JSP</li>

</ul>

</div>

<div class="lib_Contentbox lib_tabborder">

<div id="con_one_1" >ASP</div>

<div id="con_one_2" style="display:none">PHP</div>

<div id="con_one_3" style="display:none">.NET</div>

<div id="con_one_4" style="display:none">JSP</div>

</div>

</div>

<div id="lib_Tab2">

<div class="lib_Menubox lib_tabborder">

<ul>

<li id="two1" onclick="setTab('two',1,4)" >源码爱好者</li>

<li id="two2" onclick="setTab('two',2,4)"class="hover" >最新更新</li>

<li id="two3" onclick="setTab('two',3,4)">下载排行</li>

<li id="two4" onclick="setTab('two',4,4)">最新更新</li>

</ul>

</div>

<div class="lib_Contentbox lib_tabborder">

<div id="con_two_1" >源码爱好者</div>

<div id="con_two_2" style="display:none">最新更新</div>

<div id="con_two_3" style="display:none">下载排行</div>

<div id="con_two_4" style="display:none">最新更新</div>

</div>

</div>

</body>

</html>

第1种 是把代码写在dw中的

<head>

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

这里加代码

</script>

</head>

第二种是 直接调用js文件的

<head>

<script src="Scripts/AC_RunActiveContent1.js" type="text/javascript"></script>这里加代码

</script>

</head>