Javascript 切换导航栏活动元素

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

<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元素在单击后处于活动状态。 现在的问题是，当我点击第二个链接时，页面2将被加载，该页面扩展了相同的模板，因此它将再次加载，然后第一个元素将被激活。我考虑的解决方案是在每个页面中添加一个div，以便识别页面

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

加载页面时，我会根据页面类型设置所选的li元素。 我尝试了这个方法，但唯一的问题是我不认为这是一个完美的解决方案。有没有其他更简单的方法来解决这个问题？

---

谢谢

我已经在

html

元素上设置了一个

类

，以标识您的页面。这样，您就可以让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>

//特定页面中的脚本
pagetype=“page2”
//脚本作为页面之间共享的布局模板的一部分
$（函数（）{
$（“html”）.addClass（页面类型）；
})

在我看来，更好的解决方案是使用

Request:：segment（）

（或

Request:：is（）

，具体取决于URL的结构）方法检测当前页面。将其与视图生成器相结合，以避免将数据手动传递到每个视图

例如：

视图生成器：

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>

$（文档）.ready（函数（）{
var-activeLink=$（'#{{$active}}'）；
activeLink.addClass（'active'）；
});

有关这方面的更多信息，请参见Laravel 4文档：

---

您可以将锚点href与路径名进行比较，然后添加样式或为正确的锚点分配类，例如

...

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

...

或

---

html元素位于多个页面之间共享的模板中。然后：A）使用您的解决方案，而是使用javascript或B）中的id进行快速检索。按照建议动态运行一个小脚本来附加

类

。对于选项B。请参见编辑谢谢，我查看了文档，之前不知道Laravel提供了这样的功能。我认为这在涉及动态数据的边界时更有用。当只涉及页面类型时，我认为一个小小的jquery脚本就足够了

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

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