Testing for Node Being Current Page and Assigning CSS class
Is there a way to test a node to see if it is the current page? I thought it would have been something like:
item.Model ? "class=active" : null;
this doesn't work so I was experiementing with item.IsDescendantOrSelf(Model), but of course this will assign the class to all the children of the current page. What can I do to only select the current node? Here is my navigation:
@{
var page = Model.AncestorOrSelf(3).Children;
<ul>
@foreach (var subPage in page) {
var style = subPage.IsDescendantOrSelf(Model) ? "class=active" : "";
var targetParent = subPage.externalUrl ? "target=_blank" : "";
var linkParent = subPage.HasValue("externalUrl") ? subPage.url : subPage.Url;
<li @style ><a href="@linkParent" @targetParent>@subPage.Name</a>
@if(subPage.Children.Any() && subPage.IsAncestorOrSelf(Model)){
<ul class="academics-items">
@foreach (var item in subPage.Children.Where("Visible")) {
var childActive = item.IsDescendantOrSelf(Model) ? "class=activeChild" : "";
var target = item.externalUrl ? "target=_blank" : "";
var link = item.HasValue("externalUrl") ? item.url : item.Url;
<li @childActive ><a href="@link" @target>@item.Name</a>
@if(item.Children.Any() && item.IsAncestorOrSelf(Model)){
<ul class="academics-items">
@foreach (var child in item.Children.Where("Visible")) {
var subChildActive = child.IsDescendantOrSelf(Model) ? "class=subActive" : "";
var subTarget = child.externalUrl ? "target=_blank" : "";
var subLink = child.HasValue("externalUrl") ? child.url : child.Url;
<li @subChildActive ><a href="@subLink" @subTarget>@child.Name</a>
@if(child.Children.Any() && child.IsAncestorOrSelf(Model)){
<ul class="academics-items">
@foreach (var lastChild in child.Children.Where("Visible")) {
var lastChildActive = lastChild.IsDescendantOrSelf(Model) ? "class=lastActive" : "";
var lastChildTarget = lastChild.externalUrl ? "target=_blank" : "";
var lastChildLink = lastChild.HasValue("externalUrl") ? lastChild.url : lastChild.Url;
<li @lastChildActive ><a href="@lastChildLink" @lastChildTarget>@lastChild.Name</a></li>
}
</ul>
}
</li>
}
</ul>
}
</li>
}
</ul>
}
</li>
Change this var subChildActive = child.IsDescendantOrSelf(Model)?"class=subActive":""; to var subChildActive = child.IsAncestorOrSelf(Model)?"class=subActive":"";
Fuji, this still applies my css to any ancestors of the current page I would like to have it only affect the current node of the navigation. You can see my navigation here
Sorry, but I still have a question. What if I wanted the parent node of the children to be styled specifically when any of the children are active or IsEqual(Model), to show that they are part of the parents group?
Testing for Node Being Current Page and Assigning CSS class
Is there a way to test a node to see if it is the current page? I thought it would have been something like:
item.Model ? "class=active" : null;
this doesn't work so I was experiementing with item.IsDescendantOrSelf(Model), but of course this will assign the class to all the children of the current page. What can I do to only select the current node? Here is my navigation:
Hi Steve,
Fuji, this still applies my css to any ancestors of the current page I would like to have it only affect the current node of the navigation. You can see my navigation here
https://edit-wwwprep.rose-hulman.edu/offices-and-services/global-programs/current-students.aspx
Got it. Apparently there is a IsHelper "IsEqual" that I can use to compair the node in the foreach to Model.
Sorry, but I still have a question. What if I wanted the parent node of the children to be styled specifically when any of the children are active or IsEqual(Model), to show that they are part of the parents group?
If I can't do it with ternary operators, how would I do it with an "if" statement?
This method doesn't seem to be the right syntax?:
is working on a reply...