亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

正在回答

1 回答

<!doctype html>

<html>

<head>

? ? <meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

? ? *{margin:0;

? ? ?padding:0;

? ? ?font-size:13px;

? ? ?list-style:none;}


.menu{width:210px;

? ? ? margin:50px auto;

? ? ? border:1px solid #ccc;}


.menu p{height:25px;

? ? ? ? line-height:25px;

? ? ? ? font-weight:bold;

? ? ? ? background:#eee;

? ? ? ? border-bottom:1px solid #ccc;

? ? ? ? cursor:pointer;

? ? ? ? padding-left:5px;}


.menu div ul{display:none;}


.menu li{height:24px;

? ? ? ? ?line-height:24px;

? ? ? ? ?padding-left:5px;}

</style>

<script type="text/javascript">

window.onload=function(){

var P = document.getElementsByTagName("p");

? ? ? ? var uls = document.getElementsByTagName("ul");

? ? for(var i=0;i<P.length;i++){

? ? ? ? P[i].id=i;

? ? ? ? P[i].onclick =function(){

? ? ? ? ? ?for(var j=0;j<uls.length;j++){

? ? ? ? ? ? ? ?//全部隱藏

? ? ? ? ? ? ? ?uls[j].style.display = "none";

? ? ? ? ? ? ? ?}

? ? ? ? ? ? uls[this.id].style.display="block";

? ? ? ? }

? ? }

? ? ?// 遍歷所有要點擊的標題且給它們添加索引及綁定事件


? ? ?// 獲取點擊的標題上的索引屬性，根據該索引找到對應的列表


? ? ?// 判斷該列表，如果是顯示的則將其隱藏，如果是隱藏的則將其顯示出來


}

</script>

</head>

<body>

<div id="menu">

<div>

<p>Web前端</p>

<ul style="display:block">

<li>JavaScript</li>

<li>DIV+CSS</li>

<li>jQuery</li>

</ul>

</div>

<div>

<p>后臺腳本</p>

<ul>

<li>PHP</li>

<li>ASP.net</li>

<li>JSP</li>

</ul>

</div>

<div>

<p>前端框架</p>

<ul>

<li>Extjs</li>

<li>Esspress</li>

<li>YUI</li>

</ul>

</div>

</div>

</body>

</html>


0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消
Tab選項卡切換效果
  • 參與學習       65466    人
  • 解答問題       581    個

本課程詳細介紹網頁頁面中最流行常用的tab切換效果

進入課程

完整代碼！

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號