这是我的侧栏代码：
<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上呈现不同的网页。
答案 0 :(得分：0)
您可以添加一个div作为容器。在该容器中，您可以将您的内容点击“li”。