javascript - 使用 jquery 通过侧边栏呈现不同的页面？

Question

这是我的侧边栏代码:

<div class="span1">
    <!-- start: Main Menu -->
        <div id="sidebar-nav">
            <ul id="dashboard-menu">
               <li >
                 <a href="/amain">
                     <i class="fa fa-home fa-fw"></i>
                           <span>Dashboard</span>
                  </a>
               </li>            
               <li>
                  <a href="#">
                     <i class="fa fa-signal"></i>
                        <span>Charts</span>
                   </a>
                </li>
                <li>
                    <a class="" href="#">
                    <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-1" class="sign">
                    <i class="fa fa-group"></i>Replication</span>
                   </a>
                <ul class="children nav-child unstyled small collapse" id="sub-item-1">
                                  <a class= "" href ="#" >   
                                        <li>
                                            <span data-toggle="collapse" data-parent="#menu-group-1">
                                                <i class="fa fa-user"></i>
                                            </span>New
                                        </li>
                                    </a>
                                    <a class="" href="#">
                                        <li>
                                            <span data-toggle="collapse" data-parent="#menu-group-1">
                                                <i class="fa fa-frown-o"></i>
                                           </span>Pending</li>
                                     </a>
                                      <a class="" href="#">
                                          <li><span data-toggle="collapse" data-parent="#menu-group-1">
                                        <i class="fa fa-thumbs-down" ></i>
                                         </span>Rejected</li>
                                     </a>
                                      <a class="" href="#">
                                          <li><span data-toggle="collapse" data-parent="#menu-group-1">
                                      <i class="fa fa-thumbs-up"></i>
                                         </span>Approved</li>

                            </li>
                        </a>
                                </ul>

                             <li>
                                <a class="" href="#">
                                <span data-toggle="collapse" data-parent="#menu-group-2" href="#sub-item-2" class="sign">
                                   <i class="fa fa-shopping-cart"></i>Asset</span>


                                </a>
                               <ul class="children nav-child unstyled small collapse" id="sub-item-2">
                                   <li class="item-2 deeper parent active">

                                    <li><span data-toggle="collapse" data-parent="#menu-group-2">
                                        <i class="fa fa-plus"></i>
                                         </span>ADD</li>
                                     <li><span data-toggle="collapse" data-parent="#menu-group-2">
                                        <i class="fa fa-eye"></i> 
                                         </span>View</li>


                            </li>
                                </ul>
                            </li>


                            <li>
                                <a href="#">
                                    <i class="fa fa-th-large"></i>
                                    <span>Tables</span>
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>

CSS:-

 @media (max-width: 1020px) {

 #dashboard-menu {
 margin-left: 5px;
 }
 #dashboard-menu .pointer {
 display: none;
 }
 #dashboard-menu li a span {
 visibility: hidden;
 }
 }

 @media (min-width: 980px) and (max-width: 1224px){
 .nav-first{
        display: none !important;
    }
    .sidebar-right{
        display: none;
    }
     }

      @media (min-width: 768px) and (max-width: 979px){
   .navbar-inverse input.search {display: none;}

   .sidebar-right{
        display: none;
    }

    .nav-collapse .nav{
        background-color: #2c3e50;
        margin-top: 11px;

    }
    .nav-collapse{
         position: relative;
        z-index: 1000;
    }
    .nav-collapse .nav>li>a:focus{
        background: none;
    }
      }
   @media (max-width: 767px) {

     .nav-first{
        display: none !important;
    }
   #content {
             margin-left: 0px;
    }
   .sidebar-right{
        display: none;
    }
    .navbar .brand {
    font-size: 13px;
    }

    .input-prepend.input-append input{
        width: 75px;
    }
    .navbar-fixed-top{
        margin-left: 0px;
    }
    .nav-collapse .nav{
        background-color: #2c3e50;
        margin-top: 11px;

    }
    .nav-collapse{
         position: relative;
        z-index: 1000;
    }
    .nav-collapse .nav>li>a:focus{
        background: none;
    }
    #sidebar-nav{
        margin-left: -15px;
    }
  #main-stats .stat{
  width: 50%;
  float: left;
  }
    #dashboard-menu a span {
        display: block;
    }


  #sidebar-nav {
 left: -200px;
 position: fixed;
 z-index: 9999;
background-color: #f7f7f7;
padding-top: 0px;
border-right: 1px solid #ccc;
width: 165px;
box-shadow: 1px 1px 4px 1px rgb(233, 233, 233);

-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-o-transition: left .25s ease;
-ms-transition: left .25s ease;
transition: left .25s ease;
} 
#sidebar-nav #dashboard-menu {
margin-left: 10px;
}
#sidebar-nav #dashboard-menu li a span {
visibility: visible;
            margin-left: 25px
}
#sidebar-nav #dashboard-menu li:last-child a {
border-bottom: 0px;
box-shadow: none;
}
    #dashboard-menu a i,#dashboard-menu > li.active i{
        margin-left: 20px;
    }
    #dashboard-menu ul.submenu li{
        margin-left: -10px;
    }

 #sidebar-nav.display {
 position: absolute;
  left: 0;
  height: 100%;
            top: 103px;
            padding-left: 32px;
            width: 115px;
   }
    .btn-res {
    display: inherit;
          }
     }

任何人都可以帮助我生成 jquery 和 ajax 以在每个 li 上呈现不同的页面而不加载侧边栏。

Answer 1

您可以添加一个 div 作为容器。在该容器中，您可以将您的内容放在点击“li”上。