利用Load載入資料應用

利用Load載入資料應用

一、基本結構

範例結果

Step1:準備工作

 

<div id="main">
	<div id="blockleft">
		<ul>
			<li  data-file="chap1"><h3>章節</h3>
				<ul>
					<li data-file="0101">節次</li>
					<li data-file="0102">節次</li>
					<li data-file="0103">節次</li>
				</ul>
			</li>
			<li  data-file="chap2"><h3>章節</h3>
				<ul>
					<li data-file="0201">節次</li>
					<li data-file="0202">節次</li>
					<li data-file="0203">節次</li>
				</ul>
			</li>
			<li  data-file="chap3"><h3>章節</h3>
				<!--<ul>
					<li data-file="0301">節次</li>
					<li data-file="0302">節次</li>
					<li data-file="0303">節次</li>
				</ul>-->
			</li>
		</ul>
		
	</div>
	<div id="blockright">
		<div id="pageload"></div>
	</div>
</div>

 

*{padding: 0; margin: 0; font-family: Verdana, "微軟正黑體", "sans-serif"}
html,body{height: 100%; width: 100%;}
ul{list-style: none;}

#main{ height: 100%; }
/*左側====================================================================*/
#blockleft{	position: fixed; height: 100%;box-sizing: border-box;
			background: #F9F9C7; width: 400px; padding: 10px;
			border-right: 1px solid #070046; }
#blockleft {font-size: 20px; line-height: 30px;}
#blockleft li{margin-left: 20px; cursor: pointer;}
/*右側====================================================================*/
#blockright{ background: #C1F6FF;  padding: 10px;
			height: 1000px;
			margin-left: 400px;}

Step2:利用CSS,加入序號

/*各章節序號加入=========*/
#blockleft ul { counter-reset: chap 0;}
#blockleft ul li h3{counter-increment: chap; }
#blockleft ul li h3:before{ content: 'Chap' counter(chap);}
#blockleft ul ul{counter-reset:  item 0;}
#blockleft ul li ul li{ counter-increment: item;}
#blockleft ul li ul li:before{ content: counter(chap) '-' counter(item);}