Wyróżnienie bieżącej kategorii w menu

Odpowiedz Nowy wątek
2015-10-26 16:20
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 ?

edytowany 1x, ostatnio: RideorDie, 2015-10-26 16:21

Pozostało 580 znaków

2015-10-26 21:59
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
}
edytowany 1x, ostatnio: dzek69, 2015-10-26 22:01
Trochę jesteś na forum, z pewnością zauważyłeś już tagi kolorujące składnię. Korzystaj z nich. - dzek69 2015-10-26 22:01

Pozostało 580 znaków

2015-10-27 11:22
0

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

Pozostało 580 znaków

2015-10-27 13:47
$(this).find('a').prop('href').indexOf(path);;

Spróbuj tak

edytowany 1x, ostatnio: michta, 2015-10-27 13:48
Niestety dalej undefined. - RideorDie 2015-10-27 20:49
A wklej mi kod html z przeglądarki, bo możliwe, że masz dwa razy liste, bo wywołujesz w <li> w layocie akcje, która zwraca również elementy <li> i dlatego źle Ci wyszukałem element a - michta 2015-10-27 21:44
Albo dodaj jakąś klasę do elementów listy generowanych w menu i wyszukaj tą klasę i wtedy powinno być OK, bo wybierzesz wszystkie <li> w których zawiera się element <a>. - michta 2015-10-27 21:45
Jutro spróbuje tak zrobić, i dam znać. - RideorDie 2015-10-27 21:52
Dla pewności możesz wkleić fragment DOM z przeglądarki może to coś rozjaśni. ;). I wydaje mi się, że w layoucie powinieneś wywołać jedynie akcje zwracającą całe menu. A nie część menu generowane jest w akcji zwracającej partial, a cześć w layoucie(potem w razie modyfikacji koniecznie musisz zaglądać do 2 plików, ale to tylko takie luźne moje przemyślenia). - michta 2015-10-27 21:59

Pozostało 580 znaków

2015-10-28 11:59
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')
        }
    });
}
edytowany 1x, ostatnio: RideorDie, 2015-10-28 12:01

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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