On my website, there are three main pages: Home, About, and Contact. I want the link to the current page to visually indicate that clicking on it would be redundant since the user is already on that page. Should I use CSS or jQuery for this task? And what is the best way to ensure that this feature automatically applies to any future pages that may be added?
Here's the HTML code related to this issue:
<nav>
<ul id="menu">
<li><a href="~/">Home</a></li>
<li><a href="~/About">About</a></li>
<li><a href="~/Contact">Contact</a></li>
</ul>
</nav>
UPDATE
I attempted to solve this by adding the following CSS in Site.css:
nav ul li a.current {
color: blue;
}
The relevant section of HTML is as follows:
<nav>
<ul id="menu">
<li><a href="~/">Home</a></li>
<li><a href="~/About">About</a></li>
<li><a href="~/Contact">Contact</a></li>
</ul>
</nav>
Despite these changes, the links remained unchanged.
UPDATE 2
I experimented with incorporating various suggestions into my code:
In Site.css:
.current {
color: blue;
}
In _SiteLayout.cshtml:
<ul id="menu">
<li id="home" name="home"><a href="~/">Home</a></li>
<li><a href="~/About">About</a></li>
<li><a href="~/Contact">Contact</a></li>
</ul>
In Default.cshtml:
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$(".fancybox").fancybox();
$("home").addClass('current');
});
</script>
However, this approach did not yield the desired outcome either.
My frustration levels are escalating rapidly.
UPDATE 3
Another attempt involved assigning IDs in _SiteLayout.cshtml:
<nav>
<ul id="menu">
<li id="home"><a href="~/">Home</a></li>
<li id="about"><a href="~/About">About</a></li>
<li id="contact"><a href="~/Contact">Contact</a></li>
</ul>
</nav>
And modifying Site.css accordingly:
#home {color: orange;}
#home.current {color: blue;}
#about {color: orange;}
#about.current {color: blue;}
#contact {color: orange;}
#contact.current {color: blue;}
Unfortunately, this also failed to produce the desired result - all links remained gray regardless of the active page.
UPDATE 4
Another unsuccessful strategy was:
if ($('#home').attr('href').indexOf('Home') != -1) $('#home').addClass('currentPage');
UPDATE 5
I'm considering utilizing _PageStart.cshtml to handle this. Can something like the following be implemented:
@{
Layout = "~/_Layout.cshtml";
// Pseudocode
var currentPage = CurrentPage.Id;
}
// Followed by some jQuery pseudocode:
if @currentPage == Default {
#home.display = none;
else if @currentPage == About {
#about.display = none;
else if @currentPage == Contact {
#contact.display = none;
} // perhaps set them all visible from the start
UPDATE 6
Considering an alternative suggested in "jQuery for ASP.NET Developers," the following idea might work within the "ready" function (using pseudocode):
// Set all nav ul li elements to their default colors first
// Then highlight the current one in chartreuse
$("nav ul li").each(function() {
switch ($(this.name)) {
case 'home':
$(#home).css("color", "chartreuse");
break;
case 'about':
$(#about).css("color", "chartreuse");
break;
case 'contact':
$(#contact).css("color", "chartreuse");
break;
}
});
UPDATE 7
Although not elegant, I managed to achieve the desired effect by implementing click events for each li. Suggestions for improvement can be shared via this jsfiddle link: http://jsfiddle.net/vV4h5/1/
It should be possible to simplify the above jsfiddle solution by doing something like this instead:
jQuery(function () {
$("nav ul li").css("color", "black");
var currentLI = theOneClicked; //??? how to get this???
$(currentLI).css("color", "blue");
});
UPDATE 8
This solution worked in jsfiddle but not in my actual project. Here's an excerpt from _SiteLayout.cshtml:
<nav>
<ul id="menu">
<li id="home"><a href="~/">Home</a></li>
<li id="about"><a href="~/About">About</a></li>
<li id="contact"><a href="~/Contact">Contact</a></li>
</ul>
</nav>
...and the associated JavaScript code:
jQuery(function () {
$("#home").click(function (event) {
$("#home").css("color", "blue");
$("#about").css("color", "black");
$("#contact").css("color", "black");
});
});
jQuery(function () {
$("#about").click(function (event) {
$("#home").css("color", "black");
$("#about").css("color", "blue");
$("#contact").css("color", "black");
});
});
jQuery(function () {
$("#contact").click(function (event) {
$("#home").css("color", "black");
$("#about").css("color", "black");
$("#contact").css("color", "blue");
});
});
Unfortunately, this approach did not lead to the desired outcome either.