打印

选项卡-多点调用-特效-5则 [(新增：仿雅虎高级选项卡)]

caiying2007 [楼主]

版主

帖子: 2701
体力: 5158
威望: 10

1^# 大中小发表于 2007-8-20 14:06

给朋友帮忙,写了几个简单的选项卡，奉献给有需要的朋友

1）多点调用

<html>
<head>
<style>
body
{
	text-align:center;
}
.tab
{
	width:432px;
	height:208px;
	margin:0 auto;
	overflow:hidden;
	border:1px solid #cccccc;
}
.menu,.menu li
{
	margin:0;
	padding:0;
	height:24px;
	list-style:none;
	overflow:hidden;
	text-align:center;
}
.menu
{
	border-bottom:1px solid #cccccc;
}
.menu .default
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	font-weight:bold;
	color:#FFFFFF;
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
#more
{
	width:76px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('bg.jpg') no-repeat;
	color:#FF0000;
	font-weight:normal;
	text-align:right
}
.con
{
	width:422px;
	height:184px;
	margin:0 auto;
}
</style>
<head>
<body>
<script>
function init(ids,cons,dis){
	 	document.getElementById(ids).getElementsByTagName('li')[0].className='active';
		document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
//		document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis);}//鼠标指向激发效果
		document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis);}//点击激发效果
}
function onmousOver(ids,cons,dis){
o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
		if (obj.className=='active'||obj.id=='more')return;
		var o=document.getElementById(ids).getElementsByTagName('li');
		for (var i=0;i<=o.length-1;i++){o[i].className='default'}
		
		obj.className='active';
		if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
}
}
</script>

<div class='tab'>
		<ul id='nav1' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="l5" class='default'>第5新闻</li>
		</ul>
		<div class='con' id='con1'>
		</div>
	</div>
<div style="display:none">	
	<div id="div1_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div1_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div1_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div1_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
	<div id="div1_l5">
		<span>增加了！</span>
	</div>
</div>
<script>
init('nav1','con1',"div1_");
</script>

<div class='tab'>
		<ul id='nav2' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="more"><a href="#" target=_blank>更多>></a></li>
		</ul>
		<div class='con' id='con2'>
		</div>
	</div>
<div style="display:none">	
	<div id="div2_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div2_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div2_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div2_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
</div>
<script>
init('nav2','con2',"div2_");
</script>

<div class='tab'>
		<ul id='nav3' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="more" style="width:160px"><a href="#" target=_blank>更多>></a></li>
		</ul>
		<div class='con' id='con3'>
		</div>
	</div>
<div style="display:none">	
	<div id="div3_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div3_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div3_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
</div>
<script>
init('nav3','con3',"div3_");
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

2）多点调用—可伸缩

<html>
<head>
<style>
body
{
	text-align:center;
}
.tab
{
	width:422px;
	height:208px;
	margin:0 auto;
	overflow:hidden;
	border:1px solid #cccccc;
}
.menu,.menu li
{
	margin:0;
	padding:0;
	height:24px;
	list-style:none;
	overflow:hidden;
	text-align:center;
}
.menu
{
	border-bottom:1px solid #cccccc;
}
.menu .default
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	font-weight:bold;
	color:#FFFFFF;
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
.menu .showme,.menu .hidme{
	width:76px;
	float:left;
	font-size:14pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('bg.gif');
	color:#0000FF;
	text-align:right;
	font-weight:bold;
}
.con
{
	width:422px;
	height:184px;
	margin:0 auto;
}
</style>
<head>
<body>
<script>
var tb_h=new Array()
function init(ids,cons,dis,hids,tbs){
	 	document.getElementById(ids).getElementsByTagName('li')[0].className='active';
		document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
		document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis,hids);}//鼠标指向激发效果
//		document.getElementById(ids).onclick=function(){onmousOver(ids,cons,dis,hids);}//点击激发效果
		var obj_tab=document.getElementById(tbs)
		tb_h[tbs]=obj_tab.offsetHeight;
}
function onmousOver(ids,cons,dis,hids){
o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
		if (obj.className=='active'||obj.id==hids)return;
		var o=document.getElementById(ids).getElementsByTagName('li');
		for (var i=0;i<=o.length-2;i++){o[i].className='default'}
		
		obj.className='active';
		if (obj.className=='active'){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
}
}
function show_con(tbs,ids,hids){
var obj_click=document.getElementById(hids);
obj_click.innerHTML=(obj_click.innerHTML=="+")?"-":"+"
obj_click.className=(obj_click.className=='showme')?'hidme':'showme'
var hid=(obj_click.className=='showme')?1:-1
var obj_tab=document.getElementById(tbs)
var obj_nav=document.getElementById(ids)
var h_m=obj_nav.offsetHeight+2
var H=tb_h[tbs]
var n=20,t=50;
var timers=new Array(n);
if (hid<0){
    for(var i=0;i<n;i++){(
    	function(){
    		if(timers[i]) clearTimeout(timers[i]);
    		var j=i;
    		timers[i]=setTimeout(function(){obj_tab.style.height=H-Math.round((H-h_m)*(j+1)/n);},(i+1)*t);
    	}
    )()};
}
if (hid>0){
    for(var i=0;i<n;i++){(
    	function(){
    		if(timers[i]) clearTimeout(timers[i]);
    		var j=i;
    		timers[i]=setTimeout(function(){obj_tab.style.height=h_m+Math.round(H*(j+1)/n);},(i+1)*t);
    	}
    )()};
}
}
</script>

<div id='tab1' class='tab'>
		<ul id='nav1' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="hid1" class="showme"style="width:160px" onclick="show_con('tab1','nav1','hid1')">-</li>
		</ul>
		<div class='con' id='con1'>
		</div>
	</div>
<div style="display:none">	
	<div id="div1_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div1_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div1_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
</div>
<script>
init('nav1','con1',"div1_","hid1",'tab1');
</script>

<div id='tab2' class='tab'>
		<ul id='nav2' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="hid2" class="showme" onclick="show_con('tab2','nav2','hid2')">-</li>
		</ul>
		<div class='con' id='con2'>
		</div>
	</div>
<div style="display:none">	
	<div id="div2_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div2_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div2_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div2_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
</div>
<script>
init('nav2','con2',"div2_","hid2",'tab2');
</script>

<div id='tab3' class='tab'>
		<ul id='nav3' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="hid3" class="showme" onclick="show_con('tab3','nav3','hid3')">-</li>
		</ul>
		<div class='con' id='con3'>
		</div>
	</div>
<div style="display:none">	
	<div id="div3_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div3_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div3_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div3_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
</div>
<script>
init('nav3','con3',"div3_","hid3",'tab3');
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

3）多点调用—折叠

<html>
<head>
<style>
body
{
	text-align:center;
}
.tab
{
	width:432px;
	height:208px;
	margin:0 auto;
	overflow:hidden;
	border:1px solid #cccccc;
}
.menu,.menu li
{
	margin:0;
	padding:0;
	height:24px;
	list-style:none;
	overflow:hidden;
	text-align:center;
}
.menu
{
	border-bottom:1px solid #cccccc;
}
.menu .default
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	font-weight:bold;
	color:#FFFFFF;
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
.menu .showme,.menu .hidme{
	width:76px;
	float:left;
	font-size:14pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('/bg.gif');
	color:#0000FF;
	text-align:right;
	font-weight:bold
}
.con
{
	width:422px;
	height:0px;
	margin:0 auto;
}
.tab0{
	height:208
}
</style>
<head>
<body>
<script>
var show_n
var H=200,h_m=24
var n=20,t=50;
function init(ids,cons,dis,tbs,show_me){
		document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis,tbs);}
		document.getElementById(ids).onclick=function(){show_con(ids,cons,dis,tbs);}
		if (show_me!=0){show_n=tbs;
	 		document.getElementById(ids).getElementsByTagName('li')[0].className='active';
			document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
			document.getElementById(tbs).style.height=H
		}
		else{
			document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML; 
			document.getElementById(tbs).style.height=h_m;
		}
}
function onmousOver(ids,cons,dis,tbs){
o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
		if (obj.className=='active')return;
		var o=document.getElementById(ids).getElementsByTagName('li');
		for (var i=0;i<=o.length-1;i++){o[i].className='default'}
		obj.className='active';
		if (show_n==tbs){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
		obj.onmouseout=function(){if (show_n!=tbs)this.className='default';}
}
}
function show_con(ids,cons,dis,tbs){
var obj_show_tab=document.getElementById(tbs)
var obj_hid_tab=document.getElementById(show_n)
if (show_n!=tbs){
	var o=document.getElementById(show_n).childNodes[0].getElementsByTagName('li')
	for (var i=0;i<=o.length-1;i++){o[i].className='default'}
	show_n=tbs;	
		var obj=event.srcElement;
		document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;
	var timers=new Array(n);
	
	for(var i=0;i<n;i++){(
		function(){
    		if(timers[i]) clearTimeout(timers[i]);
    		var j=i;
    		timers[i]=setTimeout(function(){obj_hid_tab.style.height=H-Math.round((H-h_m)*(j+1)/n);
    										obj_show_tab.style.height=h_m+Math.round((H-h_m)*(j+1)/n);},(i+1)*t);
    		}
    	)()};
}
}
</script>
<div class="tab0">

<div id='tab1' class='tab'>
		<ul id='nav1' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
		</ul>
		<div class='con' id='con1'>
		</div>
	</div>
<div style="display:none">	
	<div id="div1_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div1_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div1_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
</div>
<script>
init('nav1','con1',"div1_",'tab1',1);
</script>

<div id='tab2' class='tab'>
		<ul id='nav2' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="l5" class="default">第5新闻</li>
		</ul>
		<div class='con' id='con2'>
		</div>
	</div>
<div style="display:none">	
	<div id="div2_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div2_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div2_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div2_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
	<div id="div2_l5">
		<span>增加了！</span>
	</div>
</div>
<script>
init('nav2','con2',"div2_",'tab2',0);
</script>

<div id='tab3' class='tab'>
		<ul id='nav3' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
		</ul>
		<div class='con' id='con3'>
		</div>
	</div>
<div style="display:none">	
	<div id="div3_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div3_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div3_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div3_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
</div>
</div>
<script>
init('nav3','con3',"div3_",'tab3',0);
</script>
<script>
//show_con(show_n)
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 caiying2007 于 2007-10-3 19:38 编辑 ]

本帖最近评分记录

marvellous 威望 +2 精品文章 2007-11-18 22:15

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

caiying2007 [楼主]

版主

帖子: 2701
体力: 5158
威望: 10

2^# 大中小发表于 2007-8-20 14:06

4）多点调用_各自循环

<html>
<head>
<style>
body
{
	text-align:center;
}
.tab
{
	width:432px;
	height:208px;
	margin:0 auto;
	overflow:hidden;
	border:1px solid #cccccc;
}
.menu,.menu li
{
	margin:0;
	padding:0;
	height:24px;
	list-style:none;
	overflow:hidden;
	text-align:center;
}
.menu
{
	border-bottom:1px solid #cccccc;
}
.menu .default
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	font-weight:bold;
	color:#FFFFFF;
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
#more
{
	width:76px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('bg.jpg') no-repeat;
	color:#FF0000;
	text-align:right;
	font-weight:normal
}
.con
{
	width:422px;
	height:184px;
	margin:0 auto;
}
</style>
<head>
<body>
<script>
var obj_temp=new Array()
var a_n=0
function init(ids,cons,dis,tt){
	 	document.getElementById(ids).getElementsByTagName('li')[0].className='active';
		document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
		document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis);}
		document.getElementById(ids).onmouseout=function(){timer_next=setTimeout(" next_d()",1000);}
		var li_o=document.getElementById(ids).getElementsByTagName('li');
		var li_n=li_o.length-1
		for (var m=0;m<li_o.length;m++)if (li_o[m].id=='more')li_n--;
		obj_temp[a_n]=new Array(ids,cons,dis,tt,li_n,0,1);a_n++
}
function onmousOver(ids,cons,dis){
clearTimeout(timer_next)
o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
		var id_=obj.parentElement.id;
		if (obj.className=='active'||obj.id=='more')return;
		var o=document.getElementById(ids).getElementsByTagName('li');
		for (var i=0;i<=o.length-1;i++){if (o[i].id!='more')o[i].className='default'}
		obj.className='active';
		document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;
		for (var i=0;i<=o.length-1;i++){
			if (o[i].className=='active')var a_n_=i
		}
		
for (var kk=0;kk<=obj_temp.length-1;kk++){
	if (obj_temp[kk][0]==id_){obj_temp[kk][5]=a_n_;}
}
}
}
next_d()
var timer_next
function next_d(){
for (var kk=0;kk<=obj_temp.length-1;kk++){
	obj_temp[kk][6]+=1;
	if (obj_temp[kk][6]>=obj_temp[kk][3]){
		obj_temp[kk][6]=1;
		obj_temp[kk][5]=(obj_temp[kk][5]>=obj_temp[kk][4])?0:obj_temp[kk][5]+1
		li_chang(obj_temp[kk][0],obj_temp[kk][1],obj_temp[kk][2],obj_temp[kk][5]);
	}
}
timer_next=setTimeout(" next_d()",1000)
}
function li_chang(ids,cons,dis,j){
	var o=document.getElementById(ids).getElementsByTagName('li');
	for (var i=0;i<=o.length-1;i++) if (o[i].id!='more')o[i].className='default';
	o[j].className='active';
	document.getElementById(cons).innerHTML=document.getElementById(dis+o[j].id).innerHTML;
}
</script>

<div class='tab'>
		<ul id='nav1' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="l5" class='default'>第5新闻</li>
		</ul>
		<div class='con' id='con1'>
		</div>
	</div>
<div style="display:none">	
	<div id="div1_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div1_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div1_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div1_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
	<div id="div1_l5">
		<span>增加了！</span>
	</div>
</div>
<script>
init('nav1','con1',"div1_",1);
</script>

<div class='tab'>
		<ul id='nav2' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="l4" class='default'>第四新闻</li>
			<li id="more"><a href="#" target=_blank>更多>></a></li>
		</ul>
		<div class='con' id='con2'>
		</div>
	</div>
<div style="display:none">	
	<div id="div2_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div2_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div2_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
	<div id="div2_l4">
		<span>当鼠标放上去时就变，而不用点了！</span>
	</div>
</div>
<script>
init('nav2','con2',"div2_",5);
</script>

<div class='tab'>
		<ul id='nav3' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
			<li id="more" style="width:160px"><a href="#" target=_blank>更多>></a></li>
		</ul>
		<div class='con' id='con3'>
		</div>
	</div>
<div style="display:none">	
	<div id="div3_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div3_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div3_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
</div>
<script>
init('nav3','con3',"div3_",10);
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

不足之处，请高手完善

编写过程中谨针对IE

[ 本帖最后由 caiying2007 于 2007-8-23 13:15 编辑 ]

TOP

美橙vps独立IP月付189元

weili

QQ叫小韦大圈

银牌会员

帖子: 1024
体力: 1669
威望: 2
当前: 广西玉林
离线: 1 天

专长 网页设计,平面

3^# 大中小发表于 2007-8-20 14:10

实不相瞒，这么多个在火狐下都无用！有问题

出售域名:9man.com等域名

TOP

请大家尊重和保护奥运知识产权。

3235183

自由天堂

中级会员

帖子: 127
体力: 271
威望: 0
当前: 北京海淀区
离线: 10 天

专长 前端制作

4^# 大中小发表于 2007-8-20 14:17

庆幸的是OP里面只有第三个不支持

模版 HTML模版这里多的是！

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

andyhunk

初级会员

帖子: 22
体力: 56
威望: 0
离线: 68 天

5^# 大中小发表于 2007-8-20 14:21

是啊在FF下都没有效果，请高手们来完善啊！

TOP

macyoyo

初级会员

帖子: 21
体力: 50
威望: 0
当前: 天津河北
离线: 232 天

6^# 大中小发表于 2007-8-22 03:12

太牛了佩服佩服要是兼容FF就好了

我是我！

TOP

NingDev

初级会员

帖子: 26
体力: 58
威望: 0
离线: 374 天

7^# 大中小发表于 2007-8-30 11:54

好东东,谢谢了

TOP

caiying2007 [楼主]

版主

帖子: 2701
体力: 5158
威望: 10

8^# 大中小发表于 2007-9-3 08:10

再发一个

5）多点调用，各点激发事件不同，可以是onClick或onmouseover，可以分别设定打开页面时是否展开及初始为第几标签显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<style>
td {
	font-family: "Verdana";
	font-size: 9pt;
	padding:3px;
}
.tabon {
	background-color: #ffffff;
	border-top: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;
	color: #DB5B6F;
	font-weight: bold;
}
.taboff {
	background-color: #f5f5f5;
	border-top: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;border-bottom: 1px solid #e3e3e3;
	color: #666666;
	font-weight: bold;
}
.tdbody {
	border-bottom: 1px solid #e3e3e3;border-right: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;
	line-height:50px;
	background-color: #ffffff;
}
.tdbody2 {
	border-right: 1px solid #e3e3e3;border-left: 1px solid #e3e3e3;
	line-height:50px;
	background-color: #ffffff;
}
</style>
<script language="JavaScript">
//一个页面n块tab调用show_me(),
//tab_id:事件tab的id,tab_n:事件tab的标签总数，tab_name:事件tab的事件标签“特征名”//
function show_me(tab_id,tab_n,tab_name){
var obj_cont=document.getElementById(tab_id).childNodes[0].childNodes;//from 0 to 6==7(<tr>)
var obj_menu=obj_cont[0].getElementsByTagName("td");//feom 0 to 5==6(<td>)
for (var i=0;i<tab_n;i++){
	obj_menu[i].className="taboff";
	obj_cont[i+1].style.display="none";
}
document.getElementById("tab_"+tab_name).className="tabon";
document.getElementById("c_"+tab_name).style.display="block";
}
</script>
</head>
<body>
<style>
p {color:#00f;font-weight:bold;font-size:12px;}
</style>
<p>tab01鼠标点击
<table border="0" cellpadding="0" cellspacing="0" width="340" id="tab1">
  <tr> 
    <td class="taboff" id="tab_woman" style="cursor:hand" onClick="show_me('tab1',6,'woman')" align="center">女装</td>
    <td class="taboff" id="tab_man" style="cursor:hand" onClick="show_me('tab1',6,'man')" align="center">男装</td>
    <td class="taboff" id="tab_sport" style="cursor:hand" onClick="show_me('tab1',6,'sport')" align="center">运动</td>
    <td class="taboff" id="tab_leisure" style="cursor:hand" onClick="show_me('tab1',6,'leisure')" align="center">休闲</td>
    <td class="taboff" id="tab_shoes" style="cursor:hand" onClick="show_me('tab1',6,'shoes')" align="center">鞋类</td>
    <td class="taboff" id="tab_decor" style="cursor:hand" onClick="show_me('tab1',6,'decor')" align="center" style="border-right: 1px solid #E3E3E3">配饰</td>
  </tr>
  <tr id="c_woman" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">女装</a></td>
  </tr>
  <tr id="c_man" style="display:none">
    <td colspan="6" class="tdbody"><a href="#">男装</a></td>
  </tr>
  <tr id="c_sport" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">运动</a></td>
  </tr>
  <tr id="c_leisure" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">休闲</a></td>
  </tr>
  <tr id="c_shoes" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">鞋类</a></td>
  </tr>
  <tr id="c_decor" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">配饰</a></td>
  </tr>
</table>
<p>tab02鼠标滑过<br>
<table border="0" cellpadding="0" cellspacing="0" width="340" id="tab2">
  <tr> 
    <td class="taboff" id="tab_woman2" style="cursor:hand" onmouseover="show_me('tab2',6,'woman2')" align="center">女装</td>
    <td class="taboff" id="tab_man2" style="cursor:hand" onmouseover="show_me('tab2',6,'man2')" align="center">男装</td>
    <td class="taboff" id="tab_sport2" style="cursor:hand" onmouseover="show_me('tab2',6,'sport2')" align="center">运动</td>
    <td class="taboff" id="tab_leisure2" style="cursor:hand" onmouseover="show_me('tab2',6,'leisure2')" align="center">休闲</td>
    <td class="taboff" id="tab_shoes2" style="cursor:hand" onmouseover="show_me('tab2',6,'shoes2')" align="center">鞋类</td>
    <td class="taboff" id="tab_decor2" style="cursor:hand" onmouseover="show_me('tab2',6,'decor2')" align="center" style="border-right: 1px solid #E3E3E3">配饰</td>
  </tr>
  <tr id="c_woman2" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">女装</a></td>
  </tr>
  <tr id="c_man2" style="display:none">
    <td colspan="6" class="tdbody"><a href="#">男装</a></td>
  </tr>
  <tr id="c_sport2" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">运动</a></td>
  </tr>
  <tr id="c_leisure2" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">休闲</a></td>
  </tr>
  <tr id="c_shoes2" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">鞋类</a></td>
  </tr>
  <tr id="c_decor2" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">配饰</a></td>
  </tr>
</table>
<p>tab03鼠标点击<br>
<table border="0" cellpadding="0" cellspacing="0" width="340" id="tab3">
  <tr> 
    <td class="taboff" id="tab_woman3" style="cursor:hand" onClick="show_me('tab3',6,'woman3')" align="center">女装</td>
    <td class="taboff" id="tab_man3" style="cursor:hand" onClick="show_me('tab3',6,'man3')" align="center">男装</td>
    <td class="taboff" id="tab_sport3" style="cursor:hand" onClick="show_me('tab3',6,'sport3')" align="center">运动</td>
    <td class="taboff" id="tab_leisure3" style="cursor:hand" onClick="show_me('tab3',6,'leisure3')" align="center">休闲</td>
    <td class="taboff" id="tab_shoes3" style="cursor:hand" onClick="show_me('tab3',6,'shoes3')" align="center">鞋类</td>
    <td class="taboff" id="tab_decor3" style="cursor:hand" onClick="show_me('tab3',6,'decor3')" align="center" style="border-right: 1px solid #E3E3E3">配饰</td>
  </tr>
  <tr id="c_woman3" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">女装</a></td>
  </tr>
  <tr id="c_man3" style="display:none">
    <td colspan="6" class="tdbody"><a href="#">男装</a></td>
  </tr>
  <tr id="c_sport3" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">运动</a></td>
  </tr>
  <tr id="c_leisure3" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">休闲</a></td>
  </tr>
  <tr id="c_shoes3" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">鞋类</a></td>
  </tr>
  <tr id="c_decor3" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">配饰</a></td>
  </tr>
</table>
<p>tab04鼠标点击,初始为第5标签显示<br>
<table border="0" cellpadding="0" cellspacing="0" width="340" id="tab4">
  <tr> 
    <td class="taboff" id="tab_woman4" style="cursor:hand" onClick="show_me('tab4',6,'woman4')" align="center">女装</td>
    <td class="taboff" id="tab_man4" style="cursor:hand" onClick="show_me('tab4',6,'man4')" align="center">男装</td>
    <td class="taboff" id="tab_sport4" style="cursor:hand" onClick="show_me('tab4',6,'sport4')" align="center">运动</td>
    <td class="taboff" id="tab_leisure4" style="cursor:hand" onClick="show_me('tab4',6,'leisure4')" align="center">休闲</td>
    <td class="taboff" id="tab_shoes4" style="cursor:hand" onClick="show_me('tab4',6,'shoes4')" align="center">鞋类</td>
    <td class="taboff" id="tab_decor4" style="cursor:hand" onClick="show_me('tab4',6,'decor4')" align="center" style="border-right: 1px solid #E3E3E3">配饰</td>
  </tr>
  <tr id="c_woman4" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">女装</a></td>
  </tr>
  <tr id="c_man4" style="display:none">
    <td colspan="6" class="tdbody"><a href="#">男装</a></td>
  </tr>
  <tr id="c_sport4" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">运动</a></td>
  </tr>
  <tr id="c_leisure4" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">休闲</a></td>
  </tr>
  <tr id="c_shoes4" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">鞋类</a></td>
  </tr>
  <tr id="c_decor4" style="display:none"> 
    <td colspan="6" class="tdbody"><a href="#">配饰</a></td>
  </tr>
</table>
<script language="JavaScript">
//网页打开会自动展开：“初始化”调用//不须自动展开的不调用//
window.onload=function(){
show_me('tab1',6,'woman');
show_me('tab2',6,'woman2');
show_me('tab3',6,'woman3');
show_me('tab4',6,'shoes4')
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 caiying2007 于 2007-9-3 08:13 编辑 ]

TOP

lijianhai2001

初级会员

帖子: 68
体力: 141
威望: 0
当前: 北京朝阳区
离线: 112 天

9^# 大中小发表于 2007-9-3 10:06

俺喜欢，收下

TOP

fwiw

初级会员

帖子: 67
体力: 155
威望: 0
离线: 2 天

10^# 大中小发表于 2007-9-3 10:23

谢谢caiying2007，能够把第三个“3）多点调用—折叠”修改成当鼠标放在下面的tab上，就自动上移吗，类似yahoo右侧的，我把onclick换为
onmouseover就不工作了，不知道怎么问题

<html>
<head>
<style>
body
{
	text-align:center;
}
.tab
{
	width:260px;
	height:208px;
	margin:0 auto;
	overflow:hidden;
	border:1px solid #cccccc;
}
.menu,.menu li
{
	margin:0;
	padding:0;
	height:24px;
	list-style:none;
	overflow:hidden;
	text-align:center;
}
.menu
{
	border-bottom:1px solid #cccccc;
}
.menu .default
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	font-weight:bold;
	color:#FFFFFF;
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
.menu .showme,.menu .hidme{
	width:76px;
	float:left;
	font-size:14pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('/bg.gif');
	color:#0000FF;
	text-align:right;
	font-weight:bold
}
.con
{
	width:260px;
	height:0px;
	margin:0 auto;
}
.tab0{
	height:208
}
</style>
<head>
<body>
<script>
var show_n
var H=200,h_m=24
var n=5,t=20;
function init(ids,cons,dis,tbs,show_me){
		document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis,tbs);}
		document.getElementById(ids).onclick=function(){show_con(ids,cons,dis,tbs);}
		if (show_me!=0){show_n=tbs;
	 		document.getElementById(ids).getElementsByTagName('li')[0].className='active';
			document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
			document.getElementById(tbs).style.height=H
		}
		else{
			document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML; 
			document.getElementById(tbs).style.height=h_m;
		}
}
function onmousOver(ids,cons,dis,tbs){
o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
		if (obj.className=='active')return;
		var o=document.getElementById(ids).getElementsByTagName('li');
		for (var i=0;i<=o.length-1;i++){o[i].className='default'}
		obj.className='active';
		if (show_n==tbs){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
		obj.onmouseout=function(){if (show_n!=tbs)this.className='default';}
}
}
function show_con(ids,cons,dis,tbs){
var obj_show_tab=document.getElementById(tbs)
var obj_hid_tab=document.getElementById(show_n)
if (show_n!=tbs){
	var o=document.getElementById(show_n).childNodes[0].getElementsByTagName('li')
	for (var i=0;i<=o.length-1;i++){o[i].className='default'}
	show_n=tbs;	
		var obj=event.srcElement;
		document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;
	var timers=new Array(n);
	
	for(var i=0;i<n;i++){(
		function(){
    		if(timers[i]) clearTimeout(timers[i]);
    		var j=i;
    		timers[i]=setTimeout(function(){obj_hid_tab.style.height=H-Math.round((H-h_m)*(j+1)/n);
    										obj_show_tab.style.height=h_m+Math.round((H-h_m)*(j+1)/n);},(i+1)*t);
    		}
    	)()};
}
}
</script>
<div class="tab0">

<div id='tab1' class='tab'>
		<ul id='nav1' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
		</ul>
		<div class='con' id='con1'>
		</div>
	</div>
<div style="display:none">	
	<div id="div1_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div1_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div1_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
</div>
<script>
init('nav1','con1',"div1_",'tab1',1);
</script>

<div id='tab3' class='tab'>
		<ul id='nav3' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
		</ul>
		<div class='con' id='con3'>
		</div>
	</div>
<div style="display:none">	
	<div id="div3_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div3_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div3_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
</div>
</div>
<script>
init('nav3','con3',"div3_",'tab3',0);
</script>
<script>
//show_con(show_n)
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

caiying2007 [楼主]

版主

帖子: 2701
体力: 5158
威望: 10

11^# 大中小发表于 2007-9-3 13:52

回复 #10 fwiw 的帖子
直接改了,试试

<html>
<head>
<style>
body
{
	text-align:center;
}
.tab
{
	width:260px;
	height:208px;
	margin:0 auto;
	overflow:hidden;
	border:1px solid #cccccc;
}
.menu,.menu li
{
	margin:0;
	padding:0;
	height:24px;
	list-style:none;
	overflow:hidden;
	text-align:center;
}
.menu
{
	border-bottom:1px solid #cccccc;
}
.menu .default
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_241a80ab0dd53bfc243c4HJ5loaUhWq0.jpg') no-repeat;
}
.menu .active
{
	width:84px;
	float:left;
	font-size:10pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	font-weight:bold;
	color:#FFFFFF;
	background:url('http://bbs.blueidea.com/attachments/2007/8/18/20070818_b835de2308bfcb1e1b9er1lVW1TwG6NA.jpg') no-repeat;
}
.menu .showme,.menu .hidme{
	width:76px;
	float:left;
	font-size:14pt;
	line-height:1.5;
	margin-left:1px;
	cursor:pointer;	
	background:url('/bg.gif');
	color:#0000FF;
	text-align:right;
	font-weight:bold
}
.con
{
	width:260px;
	height:0px;
	margin:0 auto;
}
.tab0{
	height:208
}
</style>
<head>
<body>
<script>
var show_n
var H=200,h_m=24
var n=5,t=20;
function init(ids,cons,dis,tbs,show_me){
		document.getElementById(ids).onmouseover=function(){onmousOver(ids,cons,dis,tbs);}
//		document.getElementById(ids).onclick=function(){show_con(ids,cons,dis,tbs);}
		if (show_me!=0){show_n=tbs;
	 		document.getElementById(ids).getElementsByTagName('li')[0].className='active';
			document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML;
			document.getElementById(tbs).style.height=H
		}
		else{
			document.getElementById(cons).innerHTML=document.getElementById(dis+"l1").innerHTML; 
			document.getElementById(tbs).style.height=h_m;
		}
}
function onmousOver(ids,cons,dis,tbs){
o = o || window.event;
var obj=o.target || o.srcElement;
if (obj.tagName=='LI'){
		if (obj.className=='active')return;
		var o=document.getElementById(ids).getElementsByTagName('li');
		for (var i=0;i<=o.length-1;i++){o[i].className='default'}
		obj.className='active';
		if (show_n==tbs){document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;}
		obj.onmouseout=function(){if (show_n!=tbs)this.className='default';}
}
show_con(ids,cons,dis,tbs);
}
function show_con(ids,cons,dis,tbs){
var obj_show_tab=document.getElementById(tbs)
var obj_hid_tab=document.getElementById(show_n)
if (show_n!=tbs){
	var o=document.getElementById(show_n).childNodes[0].getElementsByTagName('li')
	for (var i=0;i<=o.length-1;i++){o[i].className='default'}
	show_n=tbs;	
		var obj=event.srcElement;
		document.getElementById(cons).innerHTML=document.getElementById(dis+obj.id).innerHTML;
	var timers=new Array(n);
	
	for(var i=0;i<n;i++){(
		function(){
    		if(timers[i]) clearTimeout(timers[i]);
    		var j=i;
    		timers[i]=setTimeout(function(){obj_hid_tab.style.height=H-Math.round((H-h_m)*(j+1)/n);
    										obj_show_tab.style.height=h_m+Math.round((H-h_m)*(j+1)/n);},(i+1)*t);
    		}
    	)()};
}
}
</script>
<div class="tab0">

<div id='tab1' class='tab'>
		<ul id='nav1' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
		</ul>
		<div class='con' id='con1'>
		</div>
	</div>
<div style="display:none">	
	<div id="div1_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div1_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div1_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
</div>
<script>
init('nav1','con1',"div1_",'tab1',1);
</script>

<div id='tab3' class='tab'>
		<ul id='nav3' class='menu'>
			<li id="l1" class='default'>第一新闻</li>
			<li id="l2" class='default'>第二新闻</li>
			<li id="l3" class='default'>第三新闻</li>
		</ul>
		<div class='con' id='con3'>
		</div>
	</div>
<div style="display:none">	
	<div id="div3_l1">
		<span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span>
	</div>
	<div id="div3_l2">
		<span>所以特来问一下高手们，请大家帮帮忙！</span>
	</div>
	<div id="div3_l3">
		<span>找了几个来改，都是头部的菜单那里太难定位了</span>
	</div>
</div>
</div>
<script>
init('nav3','con3',"div3_",'tab3',0);
</script>
<script>
//show_con(show_n)
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 caiying2007 于 2007-9-3 13:54 编辑 ]

TOP

fwiw

初级会员

帖子: 67
体力: 155
威望: 0
离线: 2 天

12^# 大中小发表于 2007-9-3 16:13

回复 #11 caiying2007 的帖子

谢谢啊，呵呵

：）要是FF浏览器下也可以使用就更好了

TOP

xiaoke19520

初级会员

帖子: 132
体力: 152
威望: 0
离线: 92 天

13^# 大中小发表于 2007-9-11 21:53

哈哈。不错。收藏了。

永远!

TOP

forever759

新手上路

帖子: 30
体力: 25
威望: 0
当前: 广东广州
离线: 14 天

14^# 大中小发表于 2007-9-14 01:08

好东东，收藏啦。

TOP

sdw65063251

完全米撒了米

高级会员

帖子: 439
体力: 613
威望: 0
当前: 北京海淀区

专长 前端制作,JS

15^# 大中小发表于 2007-9-14 08:59

很遗憾，在FF下全部没有效果，没有兼容性啊，希望LZ能够考虑一下

一边撒谎，一边陶醉

TOP

web12345

初级会员

帖子: 67
体力: 101
威望: 0
当前: 湖南长沙
离线: 5 天

16^# 大中小发表于 2007-9-18 17:15

应该是因为id重用了吧

TOP

holyli

银牌会员

帖子: 416
体力: 1038
威望: 0
离线: 1 天

17^# 大中小发表于 2007-9-20 09:18

是啊在FF下都没有效果，请高手们来完善啊！

不过也很不错了.谢谢

先天下
www.xiantianxia.cn
www.futuremall.cn

TOP

asrock

初级会员

帖子: 53
体力: 124
威望: 0
离线: 186 天

18^# 大中小发表于 2007-9-20 09:58

帮顶,学习,高手啊

TOP

paopaoxiaoxin

泡泡小新

中级会员

帖子: 367
体力: 270
威望: 0
当前: 山东济南
离线: 5 天

专长 网页设计,UI,前端制作

19^# 大中小发表于 2007-9-20 10:08

高手丫你们。。。。。。。。

www.qlui.net

TOP

asdfgasdfg1

黑色瞳孔

银牌会员

帖子: 610
体力: 1086
威望: 0
当前: 大洋洲澳大利亚
离线: 93 天

20^# 大中小发表于 2007-9-20 10:20

是好东西收下啦

TOP

winhero_charles

幽谷鸟

银牌会员

帖子: 881
体力: 1820
威望: 2
当前: 广东东莞
离线: 16 天

21^# 大中小发表于 2007-9-20 11:31

不错,很喜欢,难得LZ这么专业
建议尽量用DIV+CSS来做

疯狂学Javascript,请多指教

TOP

fu80com

初级会员

帖子: 61
体力: 126
威望: 0
当前: 湖北宜昌

22^# 大中小发表于 2007-9-20 13:58

可惜FF下没有效果，兼容性需增强，我收藏了学习！谢谢楼主！

FUMB.CN模板网站长

TOP

kg21

MINI加内特

初级会员

帖子: 247
体力: 57
威望: 1
当前: 北京海淀区

专长 网页设计,UI,Flash