2021年11月29日，AdminLTE3 左侧菜单+右侧内容

原来公司内部用的整合系统是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到右侧
  });