如何在codeigniter中添加激活的引导类答案

【问题标题】：How to add bootstrap class active in codeigniter如何在codeigniter中添加激活的引导类
【发布时间】：2016-07-01 17:37:57
【问题描述】：

我想知道当我们将视图分成 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>

我想做，当用户单击树视图子菜单时，它将变为活动状态，知道当我单击树视图子菜单时。它将重新加载不会变为活动状态。在示例中，我下载了在每个子菜单页面中定义的 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();
    }
  });
};

这是布局的第一个模式。在 page.A <li> 中处于活动状态，因此 page.B，当我单击其中一个时，它变为活动状态。在将页面切片成 codeigniter 方式后，我分成 3：页眉、内容（正文）和页脚。我删除标签<li>..中的所有类。

我尝试像下面这样修改：

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

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

对不起我的英语不好:-D

【问题讨论】：

标签： php jquery css codeigniter

【解决方案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');
    }
});

});

【讨论】：

【解决方案2】：

试试preventDefault()

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

【讨论】：

【解决方案3】：

试试这个代码在body标签结束之前放入下面的代码

$(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)).click(function (e) {" 放在下面一行

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

【讨论】：

它可以工作，但是我无法加载我的页面。它是由e.preventDefault(); 引起的，我试图修改它，但它仍然无法正常工作。我就是这样：$('.treeview-menu li a[href="'+url+'"]').addClass('active');@nirmal
不，我的页面不会重新加载兄弟。我的菜单和子菜单放在 header.php 中，我分离了 AdmintLte 模板。在 AdminLte 活动类中放置在菜单或子菜单的每个页面中。 @nirmal
对不起，我的意思是 url 改变了。因为在这种情况下，标题将以新的方式出现在新页面中，在这种情况下，尽管我也有该解决方案但想确认您的情况，但有不同的解决方案。
我已经添加了代码，我希望这就是你的意思。谢谢@nirmal
嗨@nirmal，抱歉回复晚了。我已经尝试过脚本但失败了，现在我找到了 javascript。它在 app.js 中。如果你想检查，我在我的线程中编写代码。