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

最新推荐文章于 2019-02-17 20:23:52 发布

weixin_34090562

最新推荐文章于 2019-02-17 20:23:52 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/xuyran/1784092

本文介绍了一个关于婺源景点的Tab切换效果实现方案，包括HTML结构、CSS样式及简单的JavaScript交互逻辑，展示了如何通过鼠标悬停切换不同的景点信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*下面是景点页面的变动代码*/	


.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;}

<!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>

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";
  }
 }
}

浏览器效果：