Question

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

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

Answer 1

我在class元素上设置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>

Answer 2

在我看来，更好的解决方案是使用Request::segment()（或Request::is()，具体取决于您的网址结构）方法检测当前页面。将其与View编辑器结合使用可避免手动将数据传递到每个视图。

一个例子：

视图编辑：

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

Answer 3

您可以将anchor href与pathname进行比较，然后添加样式或指定类来纠正锚点，例如

...

<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');

切换导航栏活动元素

3 个答案: