像官方帮助文档前端程序 -- 右边内容部分

最新推荐文章于 2022-11-08 14:19:47 发布

寻找虫洞

最新推荐文章于 2022-11-08 14:19:47 发布

阅读量145

点赞数

分类专栏：前端编程文章标签： js ajax css html

本文链接：https://blog.csdn.net/weixin_43802477/article/details/111857218

版权

前端编程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

目的：想做个像很多官方文档那样的帮助文件。
这篇主要目的，点击左边导航栏，加载右边内容
需要用到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>

寻找虫洞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
像官方帮助文档前端程序 -- 右边内容部分

目的：想做个像很多官方文档那样的帮助文件。这篇主要讲，点击左边导航栏，加载右边内容这篇需要用到AJAX技术，AJAX实现局部加载的技术。<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> ul { list-style-type: none; padding: 0; width:20%;
复制链接

扫一扫