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

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

简介:
+关注继续查看
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 {
    height176px;
    padding-bottom10px;
 
     
}
.tabmenu {
    height:25px;
    background:url(../imges/scenery_04.jpg) right no-repeat;
     
}
.tabmenu ul {margin:0;padding:0;list-style-typenone;
            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 {
    padding5px 10px 18px;
}
#tabcontent ul,#tabcontent2 ul ,#tabcontent3 ul  {margin:0;padding:5px;list-style-typenone;}
#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

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

相关文章
postman 接口返回值有多个相同key时(不唯一),怎么提取第2个value给下一接口调用?
postman 接口返回值有多个相同key时(不唯一),怎么提取第2个value给下一接口调用?
3596 0
【第 06 个代码模型】综合案例:生产者与消费者(解决重复操作问题)|学习笔记
快速学习 【第 06 个代码模型】综合案例:生产者与消费者(解决重复操作问题)
22 0
jQuery EasyUI API 中文文档 - 标签页/选项卡(Tabs)
Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults。 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码。
1073 0
还在重复写空指针检查代码?考虑使用 Optional 吧!
如果要给 Java 所有异常弄个榜单,我会选择将 NullPointerException 放在榜首。这个异常潜伏在代码中,就像个遥控炸弹,不知道什么时候这个按钮会被突然按下(传入 null 对象)。 还记得刚入行程序员的时候,三天两头碰到空指针异常引发的 Bug,解决完一个,又在另一处碰到。那时候师兄就教我,不要相信任何『对象』,特别是别人给你的,这些地方都加上判断。于是代码通常为会变成下面这样:
28 0
【前台】【单页跳转】整个项目实现单页面跳转,抛弃iframe
即如下: 【想做到点击nav侧边栏,仅替换右边div中的内容,而不是跳转到新的页面,这样的话,其实整个项目中就只有一个完整的页面,其他的页面均只写内的部分即可,或者仅仅写要替换的内的部分即可!!】 index.
1244 0
修复duilib CEditUI控件和CWebBrowserUI控件中按Tab键无法切换焦点的bug
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41556615         在duilib中,按tab键会让焦点在Button一类的控件中切换,但是切换焦点一直存在bug,具体的描述如下:         1、在主窗体里弹出新的窗体,当新窗体中存在CEditUI控件并且焦点在此CEditUI控件上,那么按tab键将无法切换焦点而一直处于CEditUI中。
1048 0
5723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载