KendoUI 의 Menu를 사용하다가 문득 왜 선택된거를 표시해주지 않지?
라는 생각을 가지고나서 찾아보게된 kendo menu의 표시방법..!
생각보다 간단했다..
많은방법이 있겠지만 Javascript를 이용하여 해결했음..
@(Html.Kendo().Menu()
.Name("MenuTab")
.Items(items =>
{
items.Add().Text("1").Action("Index1", "controller");
items.Add().Text("2").Action("Index2", "controller");
items.Add().Text("3").Action("Index3", "controller");
items.Add().Text("4").Action("Index4", "controller");
items.Add().Text("5").Action("Index5", "controller");
items.Add().Text("6").Action("Index6", "controller");
})
)
위와같은 MVC Kendo UI를 만들어준뒤
<script>
$.each(
$("#MenuTab").find(".k-link"),
function (i, data) {
if (data.href == location.href) {
$(data).addClass("Tab_Select");
}
}
);
</script>
위와 같은 스키립트를 적어준다. k-link클래스에 새로운 클래스가 추가가 되는데 Tab_Select
선택되었을때 해당 이름의 클래스가 추가된다.
<style>
.Tab_Select{
background-color:aqua;
}
</style>
위와같이 Tab_Select란 이름의 css를 만들어주고 실행하면 style이 쉽게 적용된다!