Question

我想知道在将视图分成3个文件时如何在codeigniter中添加活动类。如：

header.php
page1.php ... page10.php
footer.php

来自此thread，在分离视图时无法做到这一点。

这个我的标题看起来像：

<body class="skin-red">
<div class="wrapper">
<header class="main-header">
</header>
<aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <!-- Sidebar user panel -->
          <div class="user-panel">
            <div class="pull-left image">
              <img src="<?php echo base_url();?>assets/dist/img/admin.png" class="img-circle" alt="User Image" />
            </div>
            <div class="pull-left info">
              <p>Username</p>
              <small>Privilage</small>
            </div>
          </div>
          <!-- search form -->
          <!-- /.search form -->
          <!-- sidebar menu: : style can be found in sidebar.less -->
          <ul class="sidebar-menu" id="sidebar">
            <li class="header">MAIN NAVIGATION</li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-users"></i> <span>Users</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="<?php echo base_url(); ?>user_man"><i class="fa fa-chevron-right"></i>User List</a></li>
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-hospital-o"></i> <span>Provider</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="<?php echo base_url();?>provider"><i class="fa fa-chevron-right"></i>Provider List</a></li>
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-book"></i> <span>Product Info</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="<?php echo base_url(); ?>productinfo"><i class="fa fa-chevron-right"></i>List Product Info</a></li>
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-book"></i> <span>Procedure</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="<?php echo base_url(); ?>procedure"><i class="fa fa-headphones"></i>Procedure List</a></li>
                <!-- <li><a href="#"><i class="fa fa-user"></i>Link Customer Portal</a></li> -->
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-film"></i> <span>Video Upload</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="#"><i class="fa fa-chevron-right"></i>Video Data</a></li>
                <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Prosedur</a></li> -->
                <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Informasi NAB</a></li> -->
                <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Demo(Video)</a></li> -->
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-camera-retro"></i> <span>Slide Show Wallpaper</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="#"><i class="fa fa-chevron-right"></i>Slide Show Data</a></li>
                <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Prosedur</a></li> -->
                <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Informasi NAB</a></li> -->
                <!-- <li><a href="#"><i class="fa fa-chevron-right"></i>Demo(Video)</a></li> -->
              </ul>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-camera-retro"></i> <span>Examples</span>
                <i class="fa fa-angle-left pull-right"></i>
              </a>
              <ul class="treeview-menu">
                <li><a href="<?php echo base_url();?>user/login"><i class="fa fa-chevron-right"></i>Login</a></li>
              </ul>
            </li>
          </ul>
        </section>
        <!-- /.sidebar -->
      </aside>
</div>
</body>

访问内容，这就是我的工作方式：

<section class="content">
.....
</section>

这是我的页脚视图：

</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
  <div class="pull-right hidden-xs">
    <b>Version</b> 2.0
  </div>
  <strong>Copyright &copy; 2014-2015</strong> All rights reserved.
</footer>


</div><!-- ./wrapper -->

<script></script>
<script></script>

</body>
</html>

我想做，当用户点击treeview子菜单时，它将变为活动状态，我知道当我点击treeview子菜单时。它会重新加载而不会变得活跃。在示例中，我在每个子菜单页面中下载了AdminLTE活动类定义，例如菜单 - <li class="active">submenu</li>

的问候，巴比

cmiiw

=============================================== =

我找到了js代码，它位于.app.js.

$.AdminLTE.tree = function (menu) {
  var _this = this;

  $("li a", $(menu)).click(function (e) {
    //Get the clicked link and the next element
    var $this = $(this);
    var checkElement = $this.next();

    //Check if the next element is a menu and is visible
    if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
      //Close the menu
      checkElement.slideUp('normal', function () {
        checkElement.removeClass('menu-open');
        //Fix the layout in case the sidebar stretches over the height of the window
        //_this.layout.fix();
      });
      checkElement.parent("li").removeClass("active");
    }
    //If the menu is not visible
    else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
      //Get the parent menu
      var parent = $this.parents('ul').first();
      //Close all open menus within the parent
      var ul = parent.find('ul:visible').slideUp('normal');
      //Remove the menu-open class from the parent
      ul.removeClass('menu-open');
      //Get the parent li
      var parent_li = $this.parent("li");

      //Open the target menu and add the menu-open class
      checkElement.slideDown('normal', function () {
        //Add the class active to the parent li
        checkElement.addClass('menu-open');
        parent.find('li.act').addClass('active');
        // parent_li.addClass('active');
        //Fix the layout in case the sidebar stretches over the height of the window
        _this.layout.fix();
      });
    }
    //if this isn't a link, prevent the page from being redirected
    if (checkElement.is('.treeview-menu')) {
      e.preventDefault();
    }
  });
};

这是布局的第一个架构。在页面中。<li>处于活动状态，所以page.B，当我点击其中一个时，它变为活动状态。在将页面切换为codeigniter方式之后，我分为3：标题，内容（正文）和页脚。我删除了标记<li> ..

中的所有类

我尝试修改如下：

checkElement.addClass('menu-open');
parent.find('li').on('click', function(){
  $(this).addClass('active');
});

它不会工作，不知道你们有没有办法。

抱歉我的英语不好:-D

Answer 1

这很容易且工作正常

$(document).ready(function(e){
var url=window.location
$('.treeview-menu a').each(function(e){
    var link = $(this).attr('href');
    if(link==url){
        $(this).parent('li').addClass('active');
        $(this).closest('.treeview').addClass('active');
    }
});

}）;

Answer 2

尝试preventDefault()

$('.treeview').on('click', function(e) {
   e.preventDefault();
});

Answer 3

试试这段代码在正文标记结束之前放置以下代码

$(document).ready(function(e){
    $('.treeview a').each(function(e){
        var pathname = window.location.pathname.split("/");
        var url= pathname[pathname.length-1];
        var link = $(this).attr('href');
       if(link==url){$(this).parent('li').addClass('active');}
    });
  });

并写在哪里“$（”li a“，$（menu））。点击（function（e）{” 在它之后放下线

  $('.treeview .active').removeClass('active');
   e.preventDefault();
   $(this).addClass('active');

如何在codeigniter中添加激活的bootstrap类

3 个答案: