从单个类渲染菜单栏并在 Yii2 中动态突出显示菜单答案

【问题标题】：Render Menu Bar from a single class and highlight the menu dynamically in Yii2从单个类渲染菜单栏并在 Yii2 中动态突出显示菜单
【发布时间】：2016-09-26 08:51:40
【问题描述】：

我的 Yii2 项目中的顶部菜单栏是单独的。我将它们呈现在我的索引文件中并使用它们。

动态使用活动类的js文件。

$(document).ready(function () {
    var url = window.location;
    // Will only work if string in href matches with location
    $('ul.navbark a[href="' + url + '"]').parent().addClass('active');
    // Will also work for relative and absolute hrefs
    $('ul.navbark a').filter(function () {
        return this.href == url;
    }).parent().addClass('active').parent().parent().addClass('active');
});

效果很好。它准确地分配了活动类，但问题是我何时在同一页面中使用搜索。导致问题的 URL 更改。当我提交搜索表单时，活动类被删除。我怎样才能解决这个问题？

谢谢！！

【问题讨论】：

您能否举例说明您的 URL 在工作时和中断时的样子？您很可能需要进行一些拆分。

标签： javascript yii2 render

【解决方案1】：

我找到了我的问题的解决方案：

到目前为止，我还没有使用 yii2 Navbar，而是使用了 html。当我使用 yii2 Navbar 时，我不必调用任何 javascript。

这是我的菜单栏视图页面：views/topmenu/chemicalinventory.php

<?php echo yii\bootstrap\Nav::widget([
    'items' => [
        ['label' => Yii::t('app','Inventory'),'url' => ['/product/index']],
        ['label' => Yii::t('app','Requests'),'url' => ['/product-requests/index']],
        ['label' => Yii::t('app','Deleted'),'url' => ['/productlines-deleted/index']],
    ],
    'options' => ['class' =>'nav nav-tabs nav-tab nav-text navbark'],    
]);
?>

现在我可以在我的任何视图页面中呈现它。

 <?php echo \Yii::$app->view->renderFile('@app/views/topmenu/chemicalinventory.php'); ?>

我的顶部菜单的 CSS 是

.nav-tab-pills { border-bottom: 3px solid #DDD; }
    .nav-tab-pills > li.active > a, .nav-tab > li.active > a:focus, .nav-tab-pills > li.active > a:hover { border-width: 0;background-color:#F7F7F7; }
    .nav-tab-pills > li > a { border: none; color: gray; }
        .nav-tab-pills > li.active > a, .nav-tab-pills > li > a:hover { border: none; color: #1ABB9C !important; background: transparent; }
        .nav-tab-pills > li > a::after { content: ""; background: #2A3F54; height: 3px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s ; transform: scale(0); }
    .nav-tab-pills > li.active > a::after, .nav-tab-pills > li:hover > a::after {transform: scale(1); }
.tab-nav-pills > li > a::after { background: #21527d none repeat scroll 0% 0%;}
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}
.nav-text{font-weight: bold}
.nav-text{font-size: 15px;}

这将给出如下图所示的输出：

【讨论】：