從一個類中渲染菜單欄，並在Yii2中動態地突出顯示菜單

我在我的Yii2項目中有一個單獨的頂部菜單欄。我將它們呈現在我的索引文件中並使用它們。從一個類中渲染菜單欄，並在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更改。當我提交搜索表單時，活動類將被刪除。我怎樣才能解決這個問題？

謝謝！

來源

2016-09-26 Mohan Prasad

你能舉一個例子，說明你的網址看起來像什麼時候工作，什麼時候中斷？很可能你需要做一些分裂。 –

我發現我的問題解決方案：

截至目前我還沒有使用yii2導航欄代替已經使用的HTML。當我使用yii2導航欄時，我不必調用任何javascript。

菜單欄這是我的看法頁：查看/頂部菜單/ 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;}

這會給輸出的東西像下面的圖片：

來源

2016-09-27 09:43:15

從一個類中渲染菜單欄，並在Yii2中動態地突出顯示菜單

回答

相關問題