开发者社区> 技术小牛人> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2017-11-20 1104

简介：
+关注继续查看
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
sql编译器源码阅读 编写高质量代码c程序if语句 浏览器tab 编写高质量代码c程序无符号 tabs选项卡
开发者社区 > 开发与运维 > 文章
作者高分内容
更多
子域名爆破&C段查询&调用Bing查询同IP网站 4053 Mifare Classic Tool(MCT)汉化版 15922 Linux中查看socket状态 2735 DHCP服务详解及配置 2868 Linux学习 Unit 7 1582
相关文章
幸运码发放
ASP.NET Core Web Api之JWT VS Session VS Cookie(二)
ASP.NET Core Web Api之JWT VS Session VS Cookie(二)前言本文我们来探讨下JWT VS Session的问题，这个问题本没有过多的去思考，看到评论讨论太激烈，就花了一点时间去研究和总结，顺便说一句，这就是写博客的好处，一篇博客写出有的可能是经验积累，有的可能是学习分享，但都逃不过看到文章的你有更多或更好的想法，往返交流自身能收获更多，何乐而不为呢？希望本文能解惑或者能得到更多的交流。
2237 0
杰克.陈
WPF和Expression Blend开发实例:充分利用Blend实现一个探照灯的效果
原文:WPF和Expression Blend开发实例:充分利用Blend实现一个探照灯的效果 本篇文章阅读的基础是在读者对于WPF有一定的了解并且有WPF相关的编码经验,对于Blend的界面布局有基础的知识.
956 0
科技小能手
MySQL错误：ERROR 1221 (HY000): Incorrect usage of DB GRANT and GLOBAL PRIVILEGES
2262 0
寒凝雪
爱立信完成对德国Allolio&Konrad的收购
877 0
imzdx
通用base.css —— 《编写高质量代码 web前端开发修炼之道》
@charset "utf-8"; /*CSS reset*/ html{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,but...
845 0
华章计算机
《编写高质量Python代码的59个有效方法》——第13条：合理利用try/except/else/f?inally结构中的每个代码块
1234 0
lfreeali
[20161230]查看父游标中sql语句.txt
[20161230]查看父游标中sql语句.txt --上午巡检完,无聊,测试使用oradebug下查看sql语句在父游标中的内容.sql语句在执行第一次硬解析时生成父子游标,其中父游标chunk --中保存sql语句,测试通过oradebug下如何查看: 1.
696 0
王静静@
super权限报错：ERROR 1221 (HY000): Incorrect usage of DB GRANT and GLOBAL PRIVILEGES
5001 0
fuyifang
ASP.net里不让浏览器缓存代码和Session使用注意事项
          //不让浏览器缓存             context.Response.Buffer = true;             context.
618 0
cnbird
Best Practices: Use of Web Application Firewalls
https://www.owasp.org/index.php/Category:OWASP_Best_Practices:_Use_of_Web_Application_Firewalls...
574 0
+关注
技术小牛人
5723
文章
0
问答
作者高分内容
更多
子域名爆破&C段查询&调用Bing查询同IP网站 4053 Mifare Classic Tool(MCT)汉化版 15922 Linux中查看socket状态 2735 DHCP服务详解及配置 2868 Linux学习 Unit 7 1582
文章排行榜
最热
最新
1 阿里云 Lindorm联合EMQ ，构建新一代 IoT 全链数据解决方案 98916
2 云上自动化运维CloudOps系列沙龙 第二弹——自动化，才高效 92295
3 当我们谈论不可变基础设施时，我们在谈论什么 90533
4 Serverless实战——2分钟，教你用Serverless每天给女朋友自动发土味情话 33258
5 使用函数计算的常态化疫情信息推送 23264
6 IT人才能嗑到的这对CP，甜！ 40462
7 聊一聊并行文件系统的客户端优化之道 39487
8 SaaS厂商数据库设计（2）-租户路由 20183
9 云端舞蹈——阿里云Serverless函数计算测评 20152
10 如何实现一个 Paxos 16597
11 阿里云商标注册申请官方入口（附商标自助申请流程） 12084
12 Quick BI数据大屏可视化大赛 18405
13 隔空手势交互，如何在现实世界上演“得心应手”？ 12482
14 《微服务治理技术白皮书》电子版和音频版地址 10939
15 深度学习与CV教程(15) | 视觉模型可视化与可解释性 12156
16 typora下载和破解（仅供学习） 10198
17 深度学习与CV教程(16) | 生成模型(PixelRNN,PixelCNN,VAE,GAN) 11944
18 深度学习与CV教程(17) | 深度强化学习 (马尔可夫决策过程,Q-Learning,DQN) 12309
19 深度学习与CV教程(18) | 深度强化学习 (梯度策略,Actor-Critic,DDPG,A3C) 12510
20 “智物智造”杯2022物联网创新应用大赛，你的idea 改变世界！ 47580
1 开发者评测局第六期——ModelScope开源模型社区评测征集令 84
2 使用ModelScope社区搭建一个录音情感识别小应用 282
3 实战云免费公开课——阿里云ACP云计算认证 61
4 线程本地存储 ThreadLocal 62
5 现货合约交易所系统开发功能说明及详情 51
6 直接上瘾！百万人都在学的Docker 3026
7 无影云桌面和服务器有什么区别？阿里云无影电脑有什么优势？ 82
8 梦回战国，领略两千多年前公孙龙如何将面向对象运用得炉火纯青 150
9 阿里云云原生加速器企业硬之城携手阿里云 Serverless 应用引擎（SAE）打造低代码平台 165
10 即将开幕！阿里云飞天技术峰会邀您一同探秘云原生最佳实践 52
11 浅谈数据中台/DW/BI/DSS 241
12 IT人才知道的二进制爱情，羡慕ing 325
13 阿里云ES TimeStream时序引擎重磅发布，助力时序场景实现最佳实践 274
14 Centos系统安装MySQL数据库 306
15 Fury：一个基于JIT动态编译的高性能多语言原生序列化框架 322
16 Python是如何表示时间的？2个模块、3种方式，1文搞定~ 440
17 基于RTS超低延时直播优化强互动场景体验 409
18 一文详解用eBPF观测HTTP 897
19 一文剖析PolarDB HTAP的列存数据压缩 337
20 中电汇通获阿里云产品生态集成认证，携手共建云数据库运维新生态 179
推荐文章
参与评测免费使用模型库赢取AirPods等好礼 顶级大咖独家传授技术写作秘籍 重磅来袭！2022年上半年阿里云开发者电子书榜单新鲜出炉 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
低代码开发师（初级）实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期：MySQL数据库进阶实战
立即下载