Reka letak tutorial pintu gelangsar pembangunan JavaScript
Pertama, mari kita lihat kesan yang dijangkakan berikut
Apabila tetikus mengklik pada tajuk di atas, kandungan di bawah berubah
Mari lihat mengikuti kod html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
*{padding: 0;margin: 0;}
a{text-decoration: none;color:#000;}
li{float:left;width:75px;height:26px;line-height:26px;text-align:center;padding:0 1px;
border-top:1px solid #eee;list-style:none;}
#tanContainer{
width:400px;height:120px;margin:0 auto;margin-top: 200px;border:1px solid #eee;}
#tabCon a{color:#999;}
#tabCon a:hover{color:red;}
#tabCon div {display:none;}
#tabCon div.fdiv {display:block;}
.mod{margin:10px 6px;}
.mod ul li{float:left;width:150px;height:25px;}
.fli{background:#FFF;border-bottom-color:#FFF;border-left:1px solid #eee;border-right:1px solid #eee;
padding:0;font-weight:bolder;}
.fdiv li{width:150px;height:30px;float:left;list-style:none;overflow:hidden;line-height:30px;margin-left:30px;}
</style>
</head>
<body>
<div id="tanContainer">
<div id="tab">
<ul>
<li class="fli"><a href="#">公告</a></li>
<li><a href="#">規(guī)則</a></li>
<li><a href="#">論壇</a></li>
<li><a href="#">安全</a></li>
<li><a href="#">公益</a></li>
</ul>
</div>
<div id="tabCon">
<div class="fdiv">
<ul>
<li><a href="#">張勇：要玩快樂(lè)的足球!</a></li>
<li><a href="#"> 阿里2000萬(wàn)馳援災(zāi)區(qū)！</a></li>
<li><a href="#">旅游寶讓你邊玩邊賺錢(qián)!</a></li>
<li><a href="#">多行跟進(jìn)阿里信用貸款!</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">個(gè)人重要信息要管牢！</a></li>
<li><a href="#"> 賣(mài)家防范紅包欺詐提醒!</a></li>
<li><a href="#">更換收貨地址的陷阱！</a></li>
<li><a href="#">注意騙子的技術(shù)升級(jí)了！</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">名公益機(jī)構(gòu)淘寶開(kāi)店攻略!</a></li>
<li><a href="#">走進(jìn)無(wú)聲課堂!</a></li>
<li><a href="#">淘寶之行大眾評(píng)審贏公益金!</a></li>
<li><a href="#">愛(ài)心品牌聯(lián)合征集!</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">淘寶之行大眾評(píng)審贏公益金</a></li>
<li><a href="#">愛(ài)心品牌聯(lián)合征集</a></li>
<li><a href="#">走進(jìn)無(wú)聲課堂</a></li>
<li><a href="#">名公益機(jī)構(gòu)淘寶開(kāi)店攻略</a></li>
</ul>
</div>
<div class="mod">
<ul>
<li><a href="#">走進(jìn)無(wú)聲課堂</a></li>
<li><a href="#">淘寶之行大眾評(píng)審贏公益金</a></li>
<li><a href="#">愛(ài)心品牌聯(lián)合征集</a></li>
<li><a href="#">名公益機(jī)構(gòu)淘寶開(kāi)店攻略</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
