一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

首页游戏下载软件下载专题资讯教程 php教程 asp.net教程 css教程网页制作网页特效手机开发办公数码

+ -

当前位置：一聚教程网 > 网页特效 > 导航菜单

推荐专题

最新下载

1

命运冠位指定魅族
1.51GB 类型： 策略卡牌
2

排水模拟器
140.44M 类型： 休闲益智
3

极限飙车吃鸡
69.88MB 类型： 赛车竞速
4

疯狂派对go
115.07M 类型： 动作冒险
5

兔子胡萝卜跑
98.67M 类型： 动作冒险
6

塔楼大亨
41.32M 类型： 模拟经营
7

罗马崛起
72.40M 类型： 策略塔防
8

迷雾求生
47.46M 类型： 角色扮演
9

卡车运输模拟
74.68M 类型： 模拟经营
10

美味星球终极一口
102.1MB 类型： 休闲益智

热门教程

1

诛仙2鬼王怎么加点鬼王加点推荐
时间：2025-08-20 类型： 游戏攻略
2

诛仙2见影灵泉奇遇任务怎么做见影灵泉奇遇任务流程攻略
时间：2025-08-20 类型： 游戏攻略
3

三国天下归心诸葛亮怎么样诸葛亮技能介绍一览
时间：2025-08-20 类型： 游戏攻略
4

三国天下归心追击队怎么玩追击队玩法教学
时间：2025-08-20 类型： 游戏攻略
5

三国天下归心武将怎么获得武将获取方法
时间：2025-08-20 类型： 游戏攻略
6

星痕共鸣剧毒蜂巢怎么获取剧毒蜂巢获取攻略
时间：2025-08-20 类型： 游戏攻略
7

新三国志曹操传李儒之影怎么打李儒之影打法教学
时间：2025-08-20 类型： 游戏攻略
8

辉烬队伍怎么搭配配队攻略指南
时间：2025-08-20 类型： 游戏攻略
9

创造吧我们的星球种田玩法怎么玩种田玩法介绍一览
时间：2025-08-20 类型： 游戏攻略
10

华夏千秋怎么表白表白方法一览
时间：2025-08-20 类型： 游戏攻略

javascript滑动菜单 Tab选项卡，横向竖向

时间：2022-06-25 21:19:00 编辑：袖梨来源：一聚教程网

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

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 
<title>js滑动菜单，Tab，选项卡，横向，竖向 </title> 
<style type="text/<a href=" http: target="_blank">css"> 
 
</style> 
 
 
<div id="tab01"> 
<h3>首页</h3> 
<div class="jj"> 
<p>嘿嘿，无视div原始class值。</p> 
</div> 
<h3 class="pr">测试</h3> 
<div> 
<p>继续无视h3原始class值。</p> 
</div> 
<h3>无聊</h3> 
<div> 
<p>h3没有值也可以～</p> 
</div> 
<h3 class="box">傻蛋</h3> 
<div> 
<p>div没有值一样可以～</p> 
</div> 
</div> 
<div id="tab02"> 
<h4>首页</h4> 
<ol class="pr"> 
<li>嘿嘿，无视容器原始class值。</li> 
</ol> 
<h4 class="box">测试</h4> 
<ol> 
<li>继续无视h3原始class值。</li> 
</ol> 
<h4>无聊</h4> 
<ol> 
<li>h3没有值也可以～</li> 
</ol> 
<h4 class="bb">傻蛋</h4> 
<ol> 
<li>div没有值一样可以～</li> 
</ol> 
</div> 
<div id="tab03"> 
<h3>首页</h3> 
<div class="tab"> 
<p>嘿嘿，无视h3原始class值。</p> 
</div> 
<h3>测试</h3> 
<div class="tab wushi"> 
<p>继续无视div原始class值。</p> 
</div> 
<h3>无聊</h3> 
<div class="tab"> 
<p>h3没有值也可以～</p> 
</div> 
<h3 class="box">傻蛋</h3> 
<div class="tab tab123"> 
<p>class值相似一样也可以～</p> 
<div> 
<p>指定class后，www.111com.net 即时再多一个div也行。</p> 
</div> 
</div> 
</div> 
<script type="text/javascript"> 
<!-- 
function Pid(id,tag){ 
if(!tag){ 
return document.getElementById(id); 
} 
else{ 
return document.getElementById(id).getElementsByTagName(tag); 
} 
}

function tab(id,hx,box,iClass,s,pr){ 
var hxs=Pid(id,hx); 
var boxs=Pid(id,box); 
if(!iClass){ // 如果不指定class，则： 
boxsClass=boxs; // 直接使用box作为容器 
} 
else{ // 如果指定class，则： 
var boxsClass = []; 
for(i=0;i<boxs.length;i++){ 
if(boxs[i].className.match(/btabb/)){// 判断容器的class匹配 
boxsClass.push(boxs[i]); 
} 
} 
} 
if(!pr){ // 如果不指定预展开容器，则： 
go_to(0); // 默认展开序列 
yy(); 
} 
else { 
go_to(pr); 
yy(); 
} 
function yy(){ 
for(var i=0;i<hxs.length;i++){ 
hxs[i].temp=i; 
if(!s){// 如果不指定事件，则： 
s="onmouseover"; // 使用默认事件 
hxs[i][s]=function(){ 
go_to(this.temp); 
} 
} 
else{ 
hxs[i][s]=function(){ 
go_to(this.temp); 
} 
} 
} 
} 
function go_to(pr){ 
for(var i=0;i<hxs.length;i++){ 
if(!hxs[i].tmpClass){ 
hxs[i].tmpClass=hxs[i].className+=" "; 
boxsClass[i].tmpClass=boxsClass[i].className+=" "; 
} 
if(pr==i){ 
hxs[i].className+=" up"; // 展开状态：标题 
boxsClass[i].className+=" up"; // 展开状态：容器 
} 
else { 
hxs[i].className=hxs[i].tmpClass; 
boxsClass[i].className=boxsClass[i].tmpClass; 
} 
} 
} 
} 
tab("tab01","h3","div","","onclick",2); tab("tab02","h4","ol");tab("tab03","h3","div","tab"); 
//--> 
</script>

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

相关文章

热门栏目