一个页面可以重复调用的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 {
     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,#tabcontent 2 ,#tabcontent 3  {
     padding 5px  10px  18px ;
}
#tabcontent ul,#tabcontent 2  ul ,#tabcontent 3  ul  { margin : 0 ; padding : 5px ; list-style-type none ;}
#tabcontent . hidden ,#tabcontent 2  . hidden ,#tabcontent 3  . hidden  { display : none ;}
  .tabbox #tabcontent p,.tabbox #tabcontent 2  p,.tabbox #tabcontent 3  p{
     line-height : 20px ;
     color : #816e59 ;
     text-indent : 2em ;
      }
      .tabbox #tabcontent p a,.tabbox #tabcontent 2  p a,.tabbox #tabcontent 3  p a{
          color : #816e59 ;}
          .tabbox #tabcontent p a:hover,.tabbox #tabcontent 2  p a:hover,.tabbox #tabcontent 3  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

相关文章
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
3天前
|
人工智能 JavaScript 前端开发
一段 JavaScript 代码,集成网站AI语音助手
根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
|
1月前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
104 15
在 golang 中执行 javascript 代码的方案详解
|
2月前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
前端开发 JavaScript
8 种技巧让你编写更简洁的 JavaScript 代码
8 种技巧让你编写更简洁的 JavaScript 代码
267 0
8 种技巧让你编写更简洁的 JavaScript 代码
|
Web App开发 JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
【译】如何编写避免垃圾开销的实时 JavaScript 代码
本文讲的是【译】如何编写避免垃圾开销的实时 JavaScript 代码,哇,这篇文章已经写了有很长一段时间了,十分感谢那些精彩的回复!其中有一些对于一些技术的指正,如使用 'delete' 。我知道了使用它可能会导致其他的降速问题,因此,我们在引擎中极少使用它。
1166 0