大家看http://www.163888.net/页面的导航按纽是怎么做出来的？
大家看http://www.163888.net/页面的导航按纽
把鼠标放上去就会自动改变外观，很是漂亮呢``呵呵```所以来请教各位是怎么做的呢`我在好几个网站都看到这样的效果。是不是用javascript写的哦？知道的达人有没有源码呢？有的话发个给小弟```
dwbzy@qq.com
问题点数：30、回复次数：4Top
1 楼superdullwolf（超级大笨狼,每天要自强,MVP）回复于 2006-03-11 06:06:15 得分 25
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>Tab控件</TITLE>
<style>
td,div,body
{
font-size:12px;
}
#TabControl .unselect
{
text-align:center;
cursor:hand;
padding:5px;
background-Color:#eeeeee;
border:1px solid lightblue;
cursor:default;
}
#TabControl .selected
{
text-align:center;
border-top:1px solid lightblue;
border-left:1px solid lightblue;
border-right:1px solid lightblue;
border-bottom:1px solid white;
background-Color:white;
padding:5px;
cursor:default;
}
#TabControl .blank
{
border-top:1px solid white;
border-left:1px solid white;
border-right:1px solid white;
border-bottom:1px solid lightblue;
background-Color:white;
}
#abdomen
{
border-top:0px;
border-left:1px solid lightblue;
border-right:1px solid lightblue;
border-bottom:1px solid lightblue;
padding:10px;
height:200px;
}
#container
{
width:100%;
display:none;
}
#container .menu
{
border:1px solid lightblue;
margin:5px;
}
</style>
</HEAD>
<BODY >
<table cellspacing="0" cellpadding="0" id="TabControl" width="100%">
<tr>
<td width="5%" class="blank" nowrap > </td>
<td width="5%" nowrap class="unselect">灰豆</td>
<td width="5%" nowrap class="unselect">大笨狼</td>
<td width="5%" nowrap class="unselect">稻草人</td>
<td width="80%" class="blank" > </td>
</tr>
</table>
<div id="abdomen" >
<div id="container" name="container" >
内容1
</div>
<div id="container" name="container" >内容2</div>
<div id="container" name="container" >内容3</div>
</div>
<SCRIPT LANGUAGE=javascript>
var tabs=document.getElementById("TabControl").rows[0].cells;
var containers=document.getElementsByName("container");
var selecedID=1;
show(0);
for(n=1;n<tabs.length-1;n++)
{
tabs[n].onclick=new Function("show(" + (n-1) + ")");
}
function show(x)
{
tabs[selecedID].className="unselect";
containers[selecedID-1].style.display="none";
containers[x].style.display="block";
selecedID=x+1;
tabs[selecedID].className="selected";
}
</SCRIPT>
</BODY>
</HTML>
Top
2 楼superdullwolf（超级大笨狼,每天要自强,MVP）回复于 2006-03-11 06:09:46 得分 0
改成mouseover
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>Tab控件</TITLE>
<style>
td,div,body
{
font-size:12px;
}
#TabControl .unselect
{
text-align:center;
cursor:hand;
padding:5px;
background-Color:#eeeeee;
border:1px solid lightblue;
cursor:default;
}
#TabControl .selected
{
text-align:center;
border-top:1px solid lightblue;
border-left:1px solid lightblue;
border-right:1px solid lightblue;
border-bottom:1px solid white;
background-Color:white;
padding:5px;
cursor:default;
}
#TabControl .blank
{
border-top:1px solid white;
border-left:1px solid white;
border-right:1px solid white;
border-bottom:1px solid lightblue;
background-Color:white;
}
#abdomen
{
border-top:0px;
border-left:1px solid lightblue;
border-right:1px solid lightblue;
border-bottom:1px solid lightblue;
padding:10px;
height:200px;
}
#container
{
width:100%;
display:none;
}
#container .menu
{
border:1px solid lightblue;
margin:5px;
}
</style>
</HEAD>
<BODY >
<table cellspacing="0" cellpadding="0" id="TabControl" width="100%">
<tr>
<td width="5%" class="blank" nowrap > </td>
<td width="5%" nowrap class="unselect">灰豆</td>
<td width="5%" nowrap class="unselect">大笨狼</td>
<td width="5%" nowrap class="unselect">稻草人</td>
<td width="80%" class="blank" > </td>
</tr>
</table>
<div id="abdomen" >
<div id="container" name="container" >
内容1
</div>
<div id="container" name="container" >内容2</div>
<div id="container" name="container" >内容3</div>
</div>
<SCRIPT LANGUAGE=javascript>
var tabs=document.getElementById("TabControl").rows[0].cells;
var containers=document.getElementsByName("container");
var selecedID=1;
show(0);
for(n=1;n<tabs.length-1;n++)
{
tabs[n].onmouseover=new Function("show(" + (n-1) + ")");
}
function show(x)
{
tabs[selecedID].className="unselect";
containers[selecedID-1].style.display="none";
containers[x].style.display="block";
selecedID=x+1;
tabs[selecedID].className="selected";
}
</SCRIPT>
</BODY>
</HTML>
Top
3 楼lhx1977（清水无鱼）回复于 2006-03-11 07:23:44 得分 5
可以通过CSS文件修改，也可以使用jsp实现。
Top
4 楼hunren（荤人）回复于 2006-03-11 07:41:01 得分 0
哇``真强````THANK YOU ~！！Top
相关问题
关键词
得分解答快速导航
相关链接
广告也精彩
反馈
