Wyróżnienie bieżącej kategorii w menu

0

Piszę aplikacje w MVC i chciałbym żeby po naciśnięciu na wybrany element z menu zmienił on klasę. Chciałbym żeby po odświeżeniu strony pamiętało też na której znajduje się kategorii.

Używam Bootstrapa i chcę to osiągnąć poprzez napisanie skryptu jQuery.

layout.cshtml

 <ul class="nav navbar-nav my-menu">
       <li>@{Html.RenderAction("Menu", "Nav");}</li>
</ul>

Menu.cshtml

@foreach (var link in Model)
{
    <li><a [email protected]("list", "Service" , new { contoller="Service" , action="List" , category=link, page=1})>@link<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-education"></span></a></li>
}

do Layout.cshtml dodałem skrypt

$(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path); // output: "/NazwaWybranejKategorii"

    $(".nav li").each(function () {
        var href = $(this).attributeHas(path); //???
        
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('klasa');
        }
    });
}

W jaki sposób przypisać do zmiennej href nazwę kategorii do której odnosi się dany Ur.Action, żeby pokrywała się z formatem wartości zmiennej path ?

0

Nie jest pewien czy dobrze rozumiem, chodzi o przypisanie klasy jeżeli atrybut href posiada "kategorie"
Czyli możesz sprawdzić czy w wartości href zawiera się nazwa kategorii:

var tmp = $(this+'>a').prop('href').indexOf(path); (indexOf zwraca -1 jeżeli nie znajdzie wystąpienia podanego wzoru)
if(tmp != -1)
{
//przypisz klase
}
0

Dokładnie o to chodzi ale nie działa. tmp nie przyjmuje żadnej wartości. W debugerze jest napisane "undefined".

1
$(this).find('a').prop('href').indexOf(path);;

Spróbuj tak

0

Działa, dzięki za pomoc!

Layout.cshtml

<ul class="nav navbar-nav">
      <li>@{Html.RenderAction("Menu", "Nav");}</li>
</ul>

Menu.cshtml

@foreach (var link in Model)
{
    <li class="test"><a [email protected]("list", "Service" , new { contoller="Service" , action="List" , category=link, page=1})>@link<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-folder-open"></span></a></li>
}

jQuery:

$(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path); // "/Knowledge"

    $(".nav li.test").each(function () {
        var tmp = $(this).find('a').prop('href').indexOf(path);

        if(tmp != -1)
        {
            $(this).closest('li').addClass('active')
        }
    });
}

1 użytkowników online, w tym zalogowanych: 0, gości: 1