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

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

2017-11-20 1114

简介：
+关注继续查看
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语句 sql格式源代码 tabs页面 sql编译器源码阅读生成
开发者社区 > 开发与运维 > 文章
作者高分内容
更多
子域名爆破&C段查询&调用Bing查询同IP网站 4075 Mifare Classic Tool(MCT)汉化版 16002 Linux中查看socket状态 2782 DHCP服务详解及配置 2925 Linux学习 Unit 7 1592
相关文章
明明如月
从IDEA代码调试器的threads选项卡的一个细节谈如何学习编程
从IDEA代码调试器的threads选项卡的一个细节谈如何学习编程
166 0
幸运码发放
ASP.NET Core Web Api之JWT VS Session VS Cookie(二)
ASP.NET Core Web Api之JWT VS Session VS Cookie(二)前言本文我们来探讨下JWT VS Session的问题，这个问题本没有过多的去思考，看到评论讨论太激烈，就花了一点时间去研究和总结，顺便说一句，这就是写博客的好处，一篇博客写出有的可能是经验积累，有的可能是学习分享，但都逃不过看到文章的你有更多或更好的想法，往返交流自身能收获更多，何乐而不为呢？希望本文能解惑或者能得到更多的交流。
2329 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...
861 0
华章计算机
《编写高质量Python代码的59个有效方法》——第13条：合理利用try/except/else/f?inally结构中的每个代码块
1251 0
lfreeali
[20161230]查看父游标中sql语句.txt
[20161230]查看父游标中sql语句.txt --上午巡检完,无聊,测试使用oradebug下查看sql语句在父游标中的内容.sql语句在执行第一次硬解析时生成父子游标,其中父游标chunk --中保存sql语句,测试通过oradebug下如何查看: 1.
709 0
主机笔记
js鼠标点击版tab切换
代码很简单，主要是布局需要用心研究下，使用时需要把css内注释去除 DOCTYPE html> tab切换 *{margin:0; padding:0;} .tab{width:298px; height:200px; border:1px solid #e5e5e5; ma...
814 0
王静静@
super权限报错：ERROR 1221 (HY000): Incorrect usage of DB GRANT and GLOBAL PRIVILEGES
5038 0
fuyifang
ASP.net里不让浏览器缓存代码和Session使用注意事项
          //不让浏览器缓存             context.Response.Buffer = true;             context.
620 0
lfreeali
[20130622]Creating Test Scripts With Bind Variables.txt
[20130622]Creating Test Scripts With Bind Variables.txt我们程序需要大量优化,而程序没有存在大量使用非绑定变量,我修改了回话参数cursor_sharing=force,这样要优化这些语句非常麻烦,一些参数要通过视图获取v$sql_bind_capture.
792 0
cnbird
Best Practices: Use of Web Application Firewalls
https://www.owasp.org/index.php/Category:OWASP_Best_Practices:_Use_of_Web_Application_Firewalls...
577 0
+关注
技术小牛人
5723
文章
0
问答
作者高分内容
更多
子域名爆破&C段查询&调用Bing查询同IP网站 4075 Mifare Classic Tool(MCT)汉化版 16002 Linux中查看socket状态 2782 DHCP服务详解及配置 2925 Linux学习 Unit 7 1592
文章排行榜
最热
最新
1 挑战8天完成职场入门-进阶，速来抢占求职训练营名额 136880
2 阿里云云原生加速器企业硬之城携手阿里云 Serverless 应用引擎（SAE）打造低代码平台 119982
3 业务中台之上的低代码应用开发平台 302058
4 [使用ModelScope]只要5分钟，快速实现中文情感分类模型 29095
5 用简历实体模型分析人力资源情况 28273
6 世界那么大，我想去看看——探索ModelScope之零样本分类 28090
7 ModelScope模型库体验之中文StructBERT系列预训练语言模型 25223
8 十分钟生成影视级室内设计效果，红星美凯龙设计云如何升级传统家居行业 129158
9 【AI征文】初识DeepRec 77030
10 揭秘！真假美猴王与如来的那起运维事故 53705
11 阿里云联合平行云推出云XR平台，支持沉浸式体验应用快速落地 | 电子书免费下载 54259
12 镜像站体验官新一期任务发布，完善镜像站配置信息拿天猫精灵音箱 54537
13 【乘风伯乐奖】寻找百位乘风者伯乐，邀请新博主入驻即可获奖 25587
14 “穿越”到虚拟世界笑风生，网易瑶台沉浸式活动平台创新云端活动体验 97199
15 云上解锁Web3.0 阿里云XR平台助力彼真科技呈现沉浸式演唱会 85602
16 【AI征文】DeepRec初识 20859
17 【AI征文】对DeepRec认识以及了解 105556
18 ModelScope--人像卡通化、人像美肤 30210
19 初识Serverless函数计算 36188
20 远光软件获得阿里云产品生态集成认证，携手阿里云共建新合作 7799
1 阿里云刘伟光：剖析企业数字化的降“本”增效 70
2 C++从入门到精通（第二篇） ：C++的基础和灵魂：类和对象（上篇） 51
3 基于CEN、SAG、VPN实现内网互通 133
4 【flask进阶】手把手带你搭建可扩展的flask项目脚手架 350
5 一个注解搞定责任链，学还是不学？ 150
6 学编程这么久，还傻傻分不清什么是方法（method），什么是函数（function）？ 91
7 【K8S系列】Pod入门 70
8 【面试题系列】混合夺命21问，你能扛到第几问？ 78
9 单元测试运行原理探究 144
10 如何基于Dataphin数据质量能力，快速建设高质量数据，支撑业务发展 170
11 Apifox使用心得 2255
12 codeup代码管理平台 3747
13 部署gitlab代码托管网站 2146
14 google搜索配置 882
15 Redis 缓存问题详解 512
16 python秒起https文件服务器 4526
17 playwright学习心得 34356
18 使用Serverless搭建Nuxt SSR 应用 397
19 微服务项目：尚融宝（2）（上手复习mybatisplus） 323
20 Alibaba Cloud Lens 云产品可观测平台 75
推荐文章
参与开源PolarDB-PG评测，赢取天猫精灵等好礼 寻找百位乘风者伯乐，邀约新博主入驻可获乘风者定制周边及重力星球蓝牙音箱！ 参加GTS云巧征文大赛，赢888元猫超卡和天猫精灵Sound 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
低代码开发师（初级）实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期：MySQL数据库进阶实战
立即下载