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

作者：袖梨 2022-06-25

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

<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>

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

相关文章

精彩推荐