溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
/*下面是景點頁面的變動代碼*/
.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公里。李坑的建筑風格獨特，是著名的徽派建筑。給人一種安靜、祥和的氣氛。李坑自古文風鼎盛、人才輩出。自宋至清，仕官富賈達百人，村里的文人留下傳世著作達29部，南宋年間出...</a></p> <p> </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";
}
}
}瀏覽器效果：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
