Laravel 中 Twitter Bootstrap 导航的自动活动类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17266909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automatic Active Class For Twitter Bootstrap Navigation in Laravel
提问by DrugCrazed
Like most people, I'm using Twitter Bootstrap for the site I'm currently developing in Laravel. So far I'm enjoying using Laravel as a PHP equivalent to Rails, but I'm wondering if there's a better way to do the navigation bars. I'm attempting to make sure that my navbar litags get the active class automatically, so I have this:
像大多数人一样，我正在将 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>
This'll be fine, for now. But when I've got menus, and more navigations it'll end up looking awful to debug and deal with.
暂时这样就好了。但是当我有了菜单和更多的导航时，调试和处理起来会很糟糕。
Is there anything akin to the Gem Tabulousfor Laravel or a generally nicer way to deal with navigation in Laravel?
回答by joshdcid
I use this:
我用这个：
<li class="{{Request::path() == 'home' ? 'active' : '';}}">
<a href="/home"><i class="fa fa-home"></i>Home</a>
</li>
回答by rmobis
Take a look at the Bootstrapperpackage, it has lots of tools to help you with Twitter Bootstrap. In your example, you could build the navigation like this:
看看Bootstrapper包，它有很多工具可以帮助你使用 Twitter Bootstrap。在您的示例中，您可以像这样构建导航：
Navigation::pills(array(
array(
'label' => 'Home',
'url' => URL::route('home'),
),
array(
'label' => 'About',
'url' => URL::route('about'),
)
));
There's also the shorthand method, less verbose, which I don't particularly like, but can be used:
还有一种速记方法，不那么冗长，我不是特别喜欢，但可以使用：
Navigation::pills(
Navigation::links(array(
array('Home', URL::route('home')),
array('About', URL::route('about')),
))
);
It's important to note that in both examples, Bootstrapper takes care of the activeclass automatically, comparing the current request URL against the one passed to the item. If, however, you wish to specify a different condition for this to apply, simply pass an activevalue, or a third value in the array, for the shorter method. Example:
需要注意的是，在这两个示例中，Bootstrapperactive自动处理该类，将当前请求 URL 与传递给项目的 URL 进行比较，这一点很重要。但是，如果您希望为此应用指定不同的条件，只需active为较短的方法传递一个值或数组中的第三个值。例子：
Navigation::pills(array(
array(
'label' => 'Home',
'url' => URL::route('home'),
),
array(
'label' => 'About',
'url' => URL::route('about'),
'active' => true,
)
));
or
或者
Navigation::pills(
Navigation::links(array(
array('Home', URL::route('home')),
array('About', URL::route('about'), true),
))
);
回答by simon
I found a small snippet which helps with this issue. Hopefully this helps the next persons who search for this. http://mikekoro.com/blog/laravel-4-active-class-for-navigational-menu/
我发现了一个有助于解决这个问题的小片段。希望这有助于下一个搜索此内容的人。 http://mikekoro.com/blog/laravel-4-active-class-for-navigational-menu/
回答by Arne
I've created a simple helper for this task. I saved it as /app/helpers/Menu.php. Then in /app/start/global.phpI added my helper file to the ClassLoader::addDirectoriesarray like so: _app_path().'/helpers',(if the class is not loaded try running "composer dump-autoload" in the console, more info about adding helpers here)
我为此任务创建了一个简单的助手。我将它保存为/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>';
}
}
In your view. just supply the route name and it will create a LI element with a link inside, the 'active' class is added to the LI element. You can also add custom classes by using the third parameter.
在你看来。只需提供路由名称，它就会创建一个带有链接的 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>
回答by Panais
If you wouldn't mind that the solution is jQuery based, then you could try something like:
如果您不介意该解决方案基于 jQuery，那么您可以尝试以下操作：
$('#mainmenu li').removeClass('active');
$('#mainmenu li a[href="'+document.location.href+'"]').parents('li').addClass('active');
where mainmenuis the id of your navbar or any other element that contains the liitems.
mainmenu您的导航栏或包含li项目的任何其他元素的 id在哪里。
回答by tkjef
This is what I use:
这是我使用的：
<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>
回答by Ruairi McNicholas
For anyone reading this who's on Laravel 5.4:
对于在 Laravel 5.4 上阅读本文的任何人：
<li class="{{Request::path() == 'home' ? 'active' : '';}}">
Needs to become (take out the ending ;):
需要变成（去掉结尾；）：
<li class="{{Request::path() == 'home' ? 'active' : ''}}">
回答by davidmars
Not a Laravel solution, but a simple client side javascript solution I wrote today:
不是 Laravel 解决方案，而是我今天写的一个简单的客户端 javascript 解决方案：
https://github.com/davidmars/bootstrapNavActive
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>
Improvements on code are welcome ;)
欢迎对代码进行改进；)
回答by Harshad Vala
I used this working fine
我用这个工作正常
<li class="{{ Request::is('blogs*') ? 'active' : '' }}">
<a href="{{ route('blogs.create') }}">Create</a>
</li>
回答by user3077332
Another useful library could be here https://code.google.com/p/bootstrap-php/source/browse/#svn%2Ftrunk%2FNavbarNot complex, but very easy to use
另一个有用的库可以在这里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();
This generates:
这会产生：
<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>
by using
通过使用
$oNavbar->setAutoActive();
the class automatically activates the corresponding entry
该类自动激活相应的条目
