在拉拉维尔中用于Twitter引导导航的自动活动类 - Automatic Active Class For Twitter Bootstrap Navigation in Laravel

像大多数人一样，我正在使用Twitter Bootstrap来开发我目前正在Laravel开发的网站。到目前为止，我喜欢使用Laravel作为相当于Rails的PHP，但我想知道是否有更好的方法来做导航栏。我正在尝试确保我的导航栏li标签自动获取活动类，所以我有这个：

<ul class="nav nav-pills">
@if(URL::current() . "/" == URL::route('home'))
    <li class="active">
@else
    <li>
@endif
    <a href="{{ route('home') }}">Home</a>
</li>
@if(URL::current() == URL::route('about'))
    <li class="active">
@else
    <li>
@endif
    <a href="{{ route('about') }}">About</a>
</li>
</ul>

现在这样就好了。但是当我有菜单和更多导航时，调试和处理起来最终会看起来很糟糕。

对于拉拉维尔来说，有什么类似于宝石

表的东西，或者处理拉拉维尔导航的更好方法吗？

我使用这个：

<li class="{{Request::path() == 'home' ? 'active' : '';}}">
  <a href="/home"><i class="fa fa-home"></i>Home</a>
</li>

看看 Bootstrapper 包，它有很多工具可以帮助你使用 Twitter Bootstrap。在您的示例中，您可以像这样构建导航：

Navigation::pills(array(
    array(
        'label'  => 'Home',
        'url'    => URL::route('home'),
    ),
    array(
        'label'  => 'About',
        'url'    => URL::route('about'),
    )
));

还有速记方法，不那么冗长，我不是特别喜欢，但可以使用：

Navigation::pills(
    Navigation::links(array(
        array('Home', URL::route('home')),
        array('About', URL::route('about')),
    ))
);

请务必注意，在这两个示例中，Bootstrapper 自动处理 active 类，将当前请求 URL 与传递给项目的 URL 进行比较。但是，如果您希望为此指定不同的条件，只需为较短的方法传递一个active值或数组中的第三个值。例：

Navigation::pills(array(
    array(
        'label'  => 'Home',
        'url'    => URL::route('home'),
    ),
    array(
        'label'  => 'About',
        'url'    => URL::route('about'),
        'active' => true,
    )
));

或

Navigation::pills(
    Navigation::links(array(
        array('Home', URL::route('home')),
        array('About', URL::route('about'), true),
    ))
);

我找到了一个有助于解决这个问题的小片段。希望这对下一个搜索此内容的人有所帮助。http://mikekoro.com/blog/laravel-4-active-class-for-navigational-menu/

我为此任务创建了一个简单的助手。我将其保存为/app/helpers/Menu.php。然后在/app/start/global.php 中，我将我的帮助程序文件添加到 ClassLoader::addDirectories 数组中，如下所示： _app_path().'/helpers',(如果未加载类，请尝试在控制台中运行"composer dump-autoload"，有关在此处添加帮助程序的更多信息(

class Menu {
 public static function item($route, $label='', $class='', $params=array()) {
    $class .= (Route::getCurrentRoute()->getAction()['as']==$route) ? ' active' : '';
    $tag = $class ? '<li class="'.trim($class).'">' : '<li>';
    return $tag.HTML::link(URL::route($route, $params),$label).'</li>'; 
  }
}

只需提供路由名称，它将创建一个内部带有链接的 LI 元素，"active"类被添加到 LI 元素中。还可以使用第三个参数添加自定义类。

<ul class="menu">
  {{ Menu::item('index','Home') }}
  {{ Menu::item('pages.about','About Us') }}
  {{ Menu::item('pages.contact','Get In Touch','last') }}
  {{ Menu::item('profile-user','Profile','',array('username' => Auth::user()->username)) }}
</ul>

对于任何阅读 Laravel 5.4 的人：

<li class="{{Request::path() == 'home' ? 'active' : '';}}">

需要成为(去掉结局;)：

<li class="{{Request::path() == 'home' ? 'active' : ''}}">

如果你不介意这个解决方案是基于jQuery的，那么你可以尝试这样的东西：

$('#mainmenu li').removeClass('active');
$('#mainmenu li a[href="'+document.location.href+'"]').parents('li').addClass('active');

其中mainmenu是导航栏或包含li项的任何其他元素的 ID。

这是我

使用的：

<li class="{{ Request::is('/') ? 'active' : '' }}"><a href="/">Home</a></li>
<li class="{{ Request::is('about') ? 'active' : '' }}"><a href="/about">About</a></li>
<li class="{{ Request::is('contact') ? 'active' : '' }}"><a href="/contact">Contact</a></li>

另一个有用的库可能在这里 https://code.google.com/p/bootstrap-php/source/browse/#svn%2Ftrunk%2FNavbar不复杂，但非常易于使用

$oNavbar      = new Bootstrap_Navbar_Handler(array('class' => 'nav-pills'));
$oNavbar->addEntry('Home', array('href' => '/pageurlHome'));
$oNavbar->addEntry('About', array('href' => '/pageurlAbout'));
$oNavbar->setAutoActive(true);
echo $oNavbar->display();

这将生成：

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav-pills nav">
        <li class="active"><a href="/pageurlHome" class="">Home</a></li>
        <li><a href="/pageurlAbout" class="">About</a></li>
      </ul>
    </div>
  </div>
</div>

通过使用

$oNavbar->setAutoActive();

该类会自动激活相应的条目

不是Laravel解决方案，而是我今天写的一个简单的客户端javascript解决方案：

https://github.com/davidmars/bootstrapNavActive

<!--include our little script-->
<script src="https://cdn.rawgit.com/davidmars/bootstrapNavActive/master/BootstrapNavActive.min.js"></script>
<!--initialize the nav element-->
<script>
$( document ).ready(
function(){
    var $mySmartNav=$("#mySmartNav");
    new BootstrapNavActive($mySmartNav);
  }
);
</script>

欢迎对代码进行改进;)

我用了这个工作正常

<li class="{{ Request::is('blogs*') ? 'active' : '' }}">
   <a href="{{ route('blogs.create') }}">Create</a>
</li>