我正在使用刀片模板,该模板包含一个导航栏。 是这样的

<ul>
    <li class="active"><a href="page1">page1</a></li>
    <li><a href="page1">page1</a></li>
    <li><a href="page1">page1</a></li>
</ul> 

使用jquery,我可以使li元素一旦被激活即可。 现在的问题是,当我单击第二个链接时,将加载page2,并且该页面扩展了相同的模板,因此它将再次加载它,然后第一个元素将处于活动状态。 我考虑过的解决方案是在每个页面上添加一个div,以便我识别该页面

<div class="type" data-type="page2"></div> 

当页面加载时,我根据页面类型设置选定的li元素。 我尝试了这一点,它起作用了,唯一的是我认为这不是完美的解决方案。 还有其他更简单的方法来解决这个问题吗? 谢谢

===============>>#1 票数:1 已采纳

我会在html元素上设置一个class来标识您的页面。 这样,您就可以让javascript和CSS对您所处的页面类型做出反应。 在这个特定的示例中,并不是说您需要CSS,而是可能突然弹出用例,然后您已经有了一个解决方案。

编辑

通过一个小的脚本动态添加class

    //script in specific page
    <script>pagetype = "page2"</script>

    //script as part of layout template shared between pages
    <script>
    $(function(){
      $("html").addClass(pagetype);
    })
    </script>

===============>>#2 票数:0

我认为,更好的解决方案是使用Request::segment() (或Request::is() ,具体取决于您的URL的结构)方法检测当前页面。 将其与View Composer结合使用可避免将数据手动传递给每个视图。

一个例子:

视图编辑器:

class PageComposer
{
    public function compose($view)
    {
        $view->with('active', Request::segment(1));
    }
}

服务提供者:

class PageServiceProvider extends ServiceProvider
{
    public function register()
    {
        View::composer('partials.header', 'PageComposer');
    }
}

头文件中所有页面共有的部分:

<ul id='pages'>
    <li id='page1'><a href="page1">page1</a></li>
    <li id='page2'><a href="page2">page2</a></li>
    <li id='page3'><a href="page3">page3</a></li>
</ul>

更改活动类的脚本:

<script>
    $(document).ready(function () {
       var activeLink = $('#{{ $active }}');               
       activeLink.addClass('active');
    });
</script>

Laravel 4文档中有关此的更多信息:

要求

查看作曲家

===============>>#3 票数:0

您可以比较锚href和路径名,然后添加样式或分配类以更正锚,例如

...

<li><a href="index.php">Link</a></li>

...

$('a[href="'+window.location.pathname.split('/').pop()+'"]').css({ color: 'red' });

要么

$('a[href="'+window.location.pathname.split('/').pop()+'"]').addClass('current');

  ask by Mohamed Bouallegue translate from so

未解决问题?本站智能推荐:

1回复

如何在页面加载后启动Bootstrap切换按钮,如果启用则不调用回调

我一直在使用Laravel 5进行电子商务。在每个产品的详细信息页面中,我希望访问者点击切换按钮将该项目添加到购物车,然后再次单击以删除该项目。 当我的访问者重新加载页面或稍后返回该产品的详细信息页面时,我希望切换按钮在页面加载后开始“打开”,因此我的访问者知道产品已经在购物车中。 我想使用
1回复

AngularJS在构造列表中的元素时分配动态的ng-model名称?

在这里,我定义了我的代码,请为此提供帮助。 我在laravel的刀片模板引擎中使用angularjs,在这种情况下,我无法为angular中的ng-model动态分配名称 $scope.categoryChange=function(id,model){ $scope.getC
1回复

设置onclick函数以锚定laravel中的元素

我正在开发一个laravel应用程序,在那里我想设置一个onclick函数到Html anchor元素。 所以我按照以下方式创建了它。 在我的刀片视图中 我的resources/assets/js/app.js 这不起作用,(我还仔细检查了app.js文件已使用larav
2回复

使用jQuery HTML替换在两个内容之间切换

我有两个弹出窗口(登录和注册),我希望能够通过跨度上的click事件在它们之间进行切换。 它第一次工作,但是当我想从第二个弹出窗口切换到第一个弹出窗口时,单击事件不会触发,这意味着我转到第二个弹出窗口后无法转到第一个弹出窗口。 我搜索了一下,发现与元素相关的click事件丢失了,但仍
1回复

导航栏中与搜索表单相关的Javascript未在源代码中显示

我将搜索表单添加到我的部分导航中,如下所示: 在栏中显示如下: 我想做的是将它与一些javascript结合使用,以使用jquery自动完成功能并在页面中发布搜索结果而不更新它。 关键是要在哪里放置指向表单脚本的链接? 我试图将其直接放在部分中,但它们没有被加载。 我的
2回复

Laravel:在1个刀片文件中导航

我目前正在开发一个新项目,并且是我第一次使用Laravel。 我创建了几个刀片文件(视图)并添加了视图的路由。 因为页面太多,所以我希望将导航内容包含在一个称为基本文件的文件中。 我在每个视图中都扩展了base.blade.php文件,因此导航到处都是一样的。 但是,我现在遇到的问题是某
1回复

Laravel 5.3中的搜索栏过滤表格

首先)添加搜索栏以查看: 第二)我的控制器我将所有用户显示在一个表格中,搜索栏位于其上 这是表格的样子 我想要的是当我在栏中搜索时我想做一个像这样的循环@foreach($ users as $ user){{$ user-> name}} @endforeach
1回复

刀片引擎元素渲染排序

我有这个代码: 它使用了Blade模板引擎,但如果计数为假,则警报div出现在表格标题之前 如何解决这个问题?
3回复

Laravel / Blade表单添加“必需”以选择元素

如何使我的选择元素成为必需的选择元素? 我想要的HTML: 我目前在刀片服务器中拥有什么: 谢谢
3回复

在Blade的HTML元素类中使用PHP变量

我在一个小项目上使用Laravel和Blade,并试图为for循环中的生成的元素动态分配类名。 但是,生成的元素实际上是在生成,例如“ <div class='form_q' .$i> ”。 连接字符串和变量并将其分配给类/属性的正确语法是什么? 或者,用指定的类生成“