溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

一個頁面可以重復(fù)調(diào)用的TAB選項卡切換js代碼 鼠標(biāo)懸浮

發(fā)布時間：2020-06-27 20:23:54 來源：網(wǎng)絡(luò) 閱讀：310 作者：小旭依然 欄目：開發(fā)技術(shù) 
/*下面是景點頁面的變動代碼*/	


.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" /><h5>小橋流水人家 -- 李坑</h5>
   
   <p><a href="#">李坑是一個以李姓聚居為主的古村落，距婺源縣城12公里。李坑的建筑風(fēng)格獨特，是著名的徽派建筑。給人一種安靜、祥和的氣氛。李坑自古文風(fēng)鼎盛、人才輩出。自宋至清，仕官富賈達(dá)百人，村里的文人留下傳世著作達(dá)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數(shù)組
 var arrayul = document.getElementById(id).getElementsByTagName("ul"); //獲取ul數(shù)組
 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";
  }
 }
}

瀏覽器效果：

一個頁面可以重復(fù)調(diào)用的TAB選項卡切換js代碼 鼠標(biāo)懸浮

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js 用 j
AI
助
手