目的:想做个像很多官方文档那样的帮助文件。
这篇主要目的,点击左边导航栏,加载右边内容
需要用到AJAX技术,AJAX实现局部加载的技术。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
ul {
list-style-type: none;
padding: 0;
width:20%;
float: left;
}
li a {
display: block;
color:black;
text-decoration: none;
}
li a:hover {
color: cornflowerblue;
}
.erji {
width:100%;
}
.list {
background-color: coral;
}
.xiala {
background-color: burlywood;
padding-left: 25px;
padding-top: 5px;
}
.dexter-document {
height:100%;
float: left;
width: 70%;
}
</style>
<script type="text/javascript">
function show(id){
var a=document.getElementById(id);
if (a.style.display=="none"){
a.style.display = "block";
}
else {
a.style.display = "none";
}
}
</script>
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for Firefox, Opera, IE7, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} /* 判断使用的浏览器,创建不同的对象 */
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
} /* 判断浏览器是否支持XMLHTTP */
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = "OK"
document.getElementById('T1').innerHTML=xmlhttp.responseText;
}
else
{
alert("Problem retrieving data:" + xmlhttp.statusText);
}
}
}
</script>
</head>
<body>
<div class="" :class="">
<a href="#">bash shell</a>
</div>
<ul>
<li class="list" >
<a onclick="loadXMLDoc('test2.txt')" >循环语句</a>
</li>
<li class="list" onclick="show('xinwen')">
<a onclick="loadXMLDoc('test3.txt')">参数</a>
</li>
<ul class="erji" id="xinwen" style="display:none">
<li class="xiala" >
<a target="abcd">参数</a>
</li>
<li class="xiala" >
<a onclick="loadXMLDoc('test4.txt')">exec 和 read 读取配置文件中将每个目录名加到归档列表中</a>
</li>
</ul>
</ul>
</div>
<body onload="loadXMLDoc('test1.html')">
<div id="T1" class="dexter-document"><br />
</body>
</body>