开发者社区> 技术小牛人> 正文

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

2017-11-20 1088

简介：
+关注继续查看
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*下面是景点页面的变动代码*/   
 
 
.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;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!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 onmouseover="tabChange(this,'tabcontent')" >婺源东线景点</li>
    <li onmouseover="tabChange(this,'tabcontent')" class="cli">李坑</li>
    <li onmouseover="tabChange(this,'tabcontent')">江湾</li>
    <li onmouseover="tabChange(this,'tabcontent')">汪口</li>
    <li onmouseover="tabChange(this,'tabcontent')">江岭</li>
    <li onmouseover="tabChange(this,'tabcontent')">晓起</li>
    <li onmouseover="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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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";
  }
 }
}

浏览器效果：

wKiom1dJZqbgcPagAABN-HlyUxI757.jpg-wh_50

本文转自  小旭依然  51CTO博客，原文链接:http://blog.51cto.com/xuyran/1784092

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

Web App开发 JavaScript
编写高质量代码c程序if语句 sql编译器源码阅读 sql编译器源码阅读生成 tabs选项卡 浏览器tab
开发者社区 > 开发与运维 > 文章
作者高分内容
更多
子域名爆破&C段查询&调用Bing查询同IP网站 4035 Mifare Classic Tool(MCT)汉化版 15884 Linux中查看socket状态 2687 DHCP服务详解及配置 2842 Linux学习 Unit 7 1575
相关文章
搁浅@殇
postman 接口返回值有多个相同key时（不唯一），怎么提取第2个value给下一接口调用？
postman 接口返回值有多个相同key时（不唯一），怎么提取第2个value给下一接口调用？
3596 0
嗯哼9925
【Little Demo】左右按钮tab选项卡双切换
1141 0
学堂小助手
【第 06 个代码模型】综合案例：生产者与消费者（解决重复操作问题）|学习笔记
快速学习 【第 06 个代码模型】综合案例：生产者与消费者（解决重复操作问题）
22 0
嗯哼9925
【Little Demo】从简单的Tab标签到Tab图片切换
1177 0
天伟
jQuery EasyUI API 中文文档 - 标签页/选项卡（Tabs）
Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults。 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易，我们不需要写任何JavaScript代码。
1073 0
Java极客技术
还在重复写空指针检查代码？考虑使用 Optional 吧！
如果要给 Java 所有异常弄个榜单，我会选择将 NullPointerException 放在榜首。这个异常潜伏在代码中，就像个遥控炸弹，不知道什么时候这个按钮会被突然按下（传入 null 对象）。 还记得刚入行程序员的时候，三天两头碰到空指针异常引发的 Bug，解决完一个，又在另一处碰到。那时候师兄就教我，不要相信任何『对象』，特别是别人给你的，这些地方都加上判断。于是代码通常为会变成下面这样：
28 0
angel挤一挤
【前台】【单页跳转】整个项目实现单页面跳转，抛弃iframe
即如下： 【想做到点击nav侧边栏，仅替换右边div中的内容，而不是跳转到新的页面,这样的话，其实整个项目中就只有一个完整的页面，其他的页面均只写内的部分即可，或者仅仅写要替换的内的部分即可！！】 index.
1244 0
redrain.
修复duilib CEditUI控件和CWebBrowserUI控件中按Tab键无法切换焦点的bug
转载请说明原出处，谢谢~~：http://blog.csdn.net/zhuhongshu/article/details/41556615         在duilib中，按tab键会让焦点在Button一类的控件中切换，但是切换焦点一直存在bug，具体的描述如下：         1、在主窗体里弹出新的窗体，当新窗体中存在CEditUI控件并且焦点在此CEditUI控件上，那么按tab键将无法切换焦点而一直处于CEditUI中。
1048 0
余二五
Android 继承BaseAdapter适配器中的getView方法，导致的ListView条目出现重复解决办法(转载)
1292 0
walb呀
利用代码生成工具Database2Sharp设计数据编辑界面
854 0
+关注
技术小牛人
5723
文章
0
问答
作者高分内容
更多
子域名爆破&C段查询&调用Bing查询同IP网站 4035 Mifare Classic Tool(MCT)汉化版 15884 Linux中查看socket状态 2687 DHCP服务详解及配置 2842 Linux学习 Unit 7 1575
文章排行榜
最热
最新
1 函数计算 HTTP 触发器支持异步，解放双手搭建 Web 服务 25270
2 从这些云原生企业身上，我看到了数字化创新者该有的样子 23436
3 阿里巴巴云数据仓库 MaxCompute 数据安全最佳实践 9617
4 云开发两周年庆 — 游戏畅玩领好礼 15885
5 OpenYurt 开源之夏开始申请啦 15952
6 【转载】基于MaxCompute的大数据安全方案 13381
7 【转载】大数据在线离线一体化解决方案最佳实践 12453
8 [版本更新] PolarDB-X on OSS 提供冷热数据分离存储 5293
9 不破不立！Fastjson2.0 性能炸裂，为了下一个十年 6513
10 万字长文带你玩转阿里云ECS云服务器（涵盖ECS产品购买、ECS管理、ECS快速部署云盘服务、ECS快照原理） 83781
11 开源之夏 2022 重磅来袭！欢迎报名阿里云 PolarDB 社区项目！ 5111
12 简历面试 | 不会讲故事的人到底有多吃亏 80870
13 PolarDB-X 与 X-DB、PolarDB 4744
14 开发者玩转机器学习不能错过的15篇深度文章！ 3721
15 阿里云视频云互动虚拟技术，打造虚拟直播最佳沉浸式体验 3663
16 AliIAC 智能音频编解码器：在有限带宽条件下带来更高质量的音频通话体验 2583
17 Zabbix对Tomcat的监控 26356
18 一个前端开发工程师的天猫精灵自定义技能开发评测报告 75450
19 EMR-StarRocks 白皮书来啦！ 82496
20 当姿态估计算法遇上《本草纲目》，看“刘畊宏男孩”如何驱动虚拟人 2063
1 计算机er要掌握的计算机思维 56
2 复旦-阿里电子信息专业学位研究生专业实践基地合作对接会成功举行 141
3 MySQL原理 - InnoDB引擎 - 行记录存储 - Redundant行格式 152
4 某神奇App data加密算法解析(一) 76
5 C语言学习——预处理命名 64
6 Spring Cloud Alibaba——Sentinel流量控制框架 51
7 Electron桌面端所见即所得-Electron练习生 56
8 Serverless 架构落地实践及案例解析 56
9 云上未来，数智导航：阿里云研究院报告合集 219
10 阿里云云原生一体化数仓 — 离线实时一体化新能力解读 124
11 阿里云混合云密码应用分析 64
12 IDEA 2018 2020 2021 2022 各版本对Maven版本兼容问题汇总 54
13 从效率到价值：云峰会阿里云产业智能OpenTrek重磅发布 59
14 Docker安装redis 133
15 快手实时数仓保障体系研发实践 327
16 Python Http Server实现服务监听和地址回调 8567
17 使用实践：Hologres锁介绍以及排查锁 114
18 一文详解｜增长那些事儿 135
19 表格存储最佳实践：使用多元索引加速 SQL 查询 66
20 直播预告 | PostgreSQL 内核解读系列第一讲：PostgreSQL 系统概述 115
推荐文章
最新的产品福利，顶级大咖观点，尽在《开发者评测局》 大咖圆桌会：产学研共话BizDevOps。 开发技能PK竞技大赛第三期 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
JS零基础入门教程（上册）
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS，云启实验室实战指南
立即下载