切换导航栏活动元素答案

【问题标题】：toggle the nav-bar active element切换导航栏活动元素
【发布时间】：2014-06-04 18:35:08
【问题描述】：

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

<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 元素。我尝试了这个，它正在起作用，唯一的问题是我认为它不是完美的解决方案。有没有其他更简单的方法来解决这个问题？谢谢

【问题讨论】：

标签： javascript jquery html laravel blade

【解决方案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>

【讨论】：

html元素在模板中，多页共享
嗯，好的。然后：A）使用您的解决方案，而是使用<div id="pagetype" data-type="page2"></div> 以便通过 javascript 中的 id 或 B）快速检索。按照动态建议运行一个小脚本以附加class。对于选项B。请参阅编辑

【解决方案2】：

在我看来，更好的解决方案是使用Request::segment()（或Request::is()，取决于您的网址的结构）方法检测当前页面。将其与 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 文档中了解更多信息：

Requests

View Composers

【讨论】：

谢谢，我查看了文档，之前我不知道 Laravel 提供了这样的功能。我认为这在绑定动态数据时更有用。当它只是关于页面类型时，我认为一个小的 jquery 脚本就足够了

【解决方案3】：

您可以将锚点 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');

【讨论】：