一个页面可以重复调用的TAB选项卡切换js代码鼠标悬浮

/*下面是景点页面的变动代码*/  .tabbox {height: 176px;padding-bottom: 10px;}
.tabmenu {height:25px;background:url(../imges/scenery_04.jpg) right no-repeat;}
.tabmenu ul {margin:0;padding:0;list-style-type: none;border-bottom:solid 1px #816e59;height:25px;}
.tabmenu li {overflow:hidden;float:left;text-align:center;width:89px;height:23px;   line-height:23px;border-bottom:solid 1px #816e59;padding-top:2px;
}
.tabmenu ul .cli {overflow:hidden;border-bottom:solid 1px #FFF;border-left:solid 1px #816e59;border-right:solid 1px #816e59;border-top:solid 1px #816e59;font-weight:bold;cursor:pointer;width:89px;height:22px;    line-height:23px;padding-top:2px;
}
#tabcontent,#tabcontent2,#tabcontent3 {padding: 5px 10px 18px;
}
#tabcontent ul,#tabcontent2 ul ,#tabcontent3 ul  {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden,#tabcontent2 .hidden,#tabcontent3 .hidden {display:none;}.tabbox #tabcontent p,.tabbox #tabcontent2 p,.tabbox #tabcontent3 p{line-height:20px;color:#816e59;text-indent:2em;}.tabbox #tabcontent p a,.tabbox #tabcontent2 p a,.tabbox #tabcontent3 p a{color:#816e59;}.tabbox #tabcontent p a:hover,.tabbox #tabcontent2 p a:hover,.tabbox #tabcontent3 p a:hover{text-decoration:none;}

<!DOCTYPE html>
<html  lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>TAB切换</title>
<link rel="stylesheet" type="text/css" href="12.css" >
<script src="12.js"></script>
</head>
<body><div class="tabbox"><div class="tabmenu"><ul><li οnmοuseοver="tabChange(this,'tabcontent')" >婺源东线景点</li><li οnmοuseοver="tabChange(this,'tabcontent')" class="cli">李坑</li><li οnmοuseοver="tabChange(this,'tabcontent')">江湾</li><li οnmοuseοver="tabChange(this,'tabcontent')">汪口</li><li οnmοuseοver="tabChange(this,'tabcontent')">江岭</li><li οnmοuseοver="tabChange(this,'tabcontent')">晓起</li><li οnmοuseοver="tabChange(this,'tabcontent')">庆源</li></ul></div><div id="tabcontent"><ul class="hidden"><li><a href="#">1111111111111111111111</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li> </ul><ul name="tabul"><img src="imges/index_38.jpg" width="321" height="99" /><h4>小桥流水人家 -- 李坑</h4><p><a href="#">李坑是一个以李姓聚居为主的古村落，距婺源县城12公里。李坑的建筑风格独特，是著名的徽派建筑。给人一种安静、祥和的气氛。李坑自古文风鼎盛、人才辈出。自宋至清，仕官富贾达百人，村里的文人留下传世著作达29部，南宋年间出...</a></p><p>&nbsp;</p></ul><ul class="hidden"><li><a href="#">3333333333333333333333</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li></ul><ul class="hidden"><li><a href="#">444444444444444444444444</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li></ul><ul class="hidden"><li><a href="#">55555555555555555555555</a></li><li><a href="#">222222222xcC22222</a></li><li><a href="#">2222222f s f22222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li><li><a href="#">2222222222222222222222</a></li></ul><ul class="hidden"><li><a href="#">6666666666666666666666</a></li><li><a href="#">7777777777777777777</a></li><li><a href="#">7777777777777777777</a></li><li><a href="#">7777777777777777777</a></li><li><a href="#">7777777777777777777</a></li><li><a href="#">7777777777777777777</a></li></ul><ul class="hidden"><li><a href="#">7777777777777777777</a></li><li><a href="#">7777777777777777777</a></li><li><a href="#">7777777777777777777</a></li><li><a href="#">7777777777777777777</a></li><li><a href="#">7777777777777777777</a></li><li><a href="#">7777777777777777777</a></li></ul></div></div>
</canvas>
</body>
</html>

function tabChange(obj,id)
{var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组for(i=0;i<arrayul.length;i++){if(obj==arrayli[i]){arrayli[i].className = "cli";arrayul[i].className = "";}else{arrayli[i].className = "";arrayul[i].className = "hidden";}}
}

浏览器效果：

转载于:https://blog.51cto.com/xuyran/1784092

一个页面可以重复调用的TAB选项卡切换js代码鼠标悬浮相关推荐

uniapp 制作一个可复用的segmented-control（tab选项卡）
uniapp 制作一个可复用的segmented-control(tab选项卡) 开局一张图,内容全靠编 1.开局一张图(先上效果图) 2.内容全靠编开始编写复用组件: segmented-con ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
layui获取tab页id_LayUI的Tab选项卡切换显示对应数据
LayUI tab选项卡 + 分页展示实现 Tab选项卡切换显示对应数据要求:实现tab选项卡改变的同时展示数据也跟着改变实现条件: 1.选项卡[官网 – 文档/示例 – 页面元素 – 选项卡] ...
html如何实现选项卡切换思路,Tab选项卡切换完整思路及实现，值得珍藏
原标题:Tab选项卡切换完整思路及实现,值得珍藏这篇文章是从微信上转载过来的,原文作者是"Java实例解析",文章内容很棒,只是这个作者可能是一时看不到效果,所以没更新几篇就放弃 ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
从一个html页面传值到另一个页面,两个html之间的值传递(js location.search用法)
从一个html页面传值到另一个页面,两个html之间的值传递(js location.search用法) 转载,点击跳转
如何用html实现选项卡切换,Css如何实现tab选项卡切换
Css实现tab选项卡切换的方法:利用target的特性,可以实现纯css的tab效果切换,代码为[#tab1:target,#tab2:target,#tab3:target{z-index:1;} ...
html图片多tab切换代码,CSS实现Tab页切换实例代码
1.hover 移入其父元素.navI时,触发鼠标的hover态,给父元素添加样式为position:relative;z-index:1;.从而提升了层级z-index.在其子元素导航内容的层级比拼 ...
tab选项卡转换html,前端开发tab选项卡切换各种解决方案
前端开发软件ide| tab切换,做前端的各位大神再熟悉不过,因为运用的场合太多,所以大家可能都不屑于去关心了.不晓得大家遇到这种时是自己马上梳理逻辑写一次呢,还是用已有的模板或自己的库,今天我对自己 ...

一个页面可以重复调用的TAB选项卡切换js代码鼠标悬浮

一个页面可以重复调用的TAB选项卡切换js代码鼠标悬浮相关推荐

最新文章

热门文章

一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮

一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮相关推荐

最新文章

热门文章

一个页面可以重复调用的TAB选项卡切换js代码鼠标悬浮

一个页面可以重复调用的TAB选项卡切换js代码鼠标悬浮相关推荐