原来公司内部用的整合系统是PHP+Mysql, 但是想把PHP和mysql版本的升级到最新，原来老的代码就不能使用了，所以要尽快升级代码，考虑来考虑去，还是简单的AdminLTE3+Bootstarp4+Jquery + Ajax + PHP后端， 不考虑VUE了，感觉只是内部使用，简单为好。。但是有很多东西需要边做边学了。。。项目起始日为2021年11月29日。以内场人员需求分析为主要项目开始学起, 到今天12月5号已经快一个礼拜了，遇到的问题很多，感觉还是找个地方记录一些突破的难点，放弃在CSDN记录了，还是头条方便点。。

今天第一个是实现AdminLTE3 左侧菜单+右侧内容

HTML:

        <div class="sidebar">          <nav class="mt-2">            <ul              class="nav nav-pills nav-sidebar flex-column"              data-widget="treeview"              role="menu"              data-accordion="false"            >              <li class="nav-item has-treeview">                <a href="#" class="nav-link">                  <i class="nav-icon fas fa-tachometer-alt"></i>                  <p>IE Tools <i class="right fas fa-angle-left"></i></p>                </a>                <ul class="nav-item nav-treeview has-treeview">                  <li class="nav-item">                    <a href="#" class="nav-link">                      <i class="far fa-circle nav-icon"></i>                      <p>                        Inbuilding Analyse                        <i class="right fas fa-angle-left"></i>                      </p>                    </a>                    <ul class="nav nav-treeview">                      <li class="nav-item">                        <a                          href="javascript:void(0)"                          class="nav-link"                          data="child_page/inb_basic_setup.html"                        >                          <i class="far fa-dot-circle nav-icon"></i>                          <p>Basic Setup</p>                        </a>                      </li>                      <li class="nav-item">                        <a                          href="javascript:void(0)"                          class="nav-link"                          data="child_page/inb_anyalse_act.html"                        >                          <i class="far fa-dot-circle nav-icon"></i>                          <p>Generate Report</p>                        </a>                      </li>                    </ul>                  </li>                </ul>              </li>            </ul>          </nav>        </div>

Jquery :

  $(function () {    $("ul.nav-sidebar a").click(function () {      var li = $("ul.nav-sidebar a");      li.removeClass("active");      $(this).addClass("active");    });// 保持高亮    $("ul.nav-treeview a").click(function () {      var url = $(this).attr("data");      $("#right_page").load(url);    });//将url loading到右侧  });