I am attempting to highlight the current active link using jQuery in an ASPX web form. First, I retrieved all hyperlinks from my database to gallery.aspx using the following function in the code-behind:
public string build_Gallery_Category()
{
string post = "";
DataTable dt = new DataTable();
clsBusiness cls = new clsBusiness();
dt = cls.Fill_In_DataTable("GalleryGroup");
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
post += "<li><a href='gallery.aspx?gid=" + dt.Rows[i]["GalleryId"].ToString() + "'><strong>" + dt.Rows[i]["GalleryName"] + "</strong></a></li>";
}
}
return post;
}
After calling this method, all hyperlinks are displayed on gallery.aspx as shown below:
<div id="menu">
<ul>
<%=viewCategory %>
</ul>
</div>
Next, add this style to gallery.aspx:
<style>
.active { background: #f00; }
</style>
Finally, I added the following jQuery code at the end of the form:
<script>
$("menu li").click(function (e) {
e.preventDefault();
$("menu li a.active").removeClass("active"); //Remove any "active" class
$("a", this).addClass("active"); //Add "active" class to selected tab
});
</script>
However, I am encountering issues with my code. Any assistance would be greatly appreciated. Thank you.