We have a master page that holds a UL element (see sample below) and want to set the background color of the LI element that we clicked. However, since the LinkButton inside the LI element does a postback we are losing the background color setting we make
on a click. I was hoping to do in js or css if possible.
According to your code, we could find that it will redirect to target page after you click the link button, I’d like to know if target page contains “sidebar-nav” too or the sidebar-nav is in a master page.
Best Regards,
Fei Han
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
You could pass active item value via querystring between web pages, and then you could retrieve active item from querystring and determine which item should be display with specific CSS styles when DOM is ready. The following sample is for your reference.
$(function () {
var qy = window.location.search;
if (qy != "") {
var activeitem = qy.split('=')[1];
switch (activeitem) {
case "m1":
$("#mnu1 a").css("background-color", "red");
break;
case "m2":
$("#mnu2 a").css("background-color", "red");
break;
}
}
})
Best Regards,
Fei Han
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
350 Points
1528 Posts
Set li background
Aug 02, 2016 07:25 PM|dlchase|LINK
We have a master page that holds a UL element (see sample below) and want to set the background color of the LI element that we clicked. However, since the LinkButton inside the LI element does a postback we are losing the background color setting we make on a click. I was hoping to do in js or css if possible.
<div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li> <span style="color: #0000FF"> - - Menu Options - - </span> </li> <li class="mnulird" id="mnu1"> <asp:LinkButton ID="LBtnMenuDemo" runat="server" PostBackUrl="~/clients/Demographics.aspx">Demographics</asp:LinkButton> </li> <li class="mnulird" id="mnu2"> <asp:LinkButton ID="LBtnMenuDiet" runat="server" PostBackUrl="~/clients/Diet.aspx">Current Diet - Meals</asp:LinkButton> </li> .... </ul>All-Star
40535 Points
6233 Posts
Microsoft
Re: Set li background
Aug 03, 2016 10:10 AM|Fei Han - MSFT|LINK
Hi dlchase,
According to your code, we could find that it will redirect to target page after you click the link button, I’d like to know if target page contains “sidebar-nav” too or the sidebar-nav is in a master page.
Best Regards,
Fei Han
Member
350 Points
1528 Posts
Re: Set li background
Aug 03, 2016 11:57 AM|dlchase|LINK
Yes, all the links use the same master page and sidebar-nav is part of that master page.
All-Star
40535 Points
6233 Posts
Microsoft
Re: Set li background
Aug 04, 2016 08:43 AM|Fei Han - MSFT|LINK
Hi dlchase,
You could pass active item value via querystring between web pages, and then you could retrieve active item from querystring and determine which item should be display with specific CSS styles when DOM is ready. The following sample is for your reference.
<ul class="sidebar-nav"> <li> <span style="color: #0000FF">- - Menu Options - - </span> </li> <li class="mnulird" id="mnu1"> <asp:LinkButton ID="LBtnMenuDemo" runat="server" PostBackUrl="~/clients/Demographics.aspx?activeid=m1">Demographics</asp:LinkButton> </li> <li class="mnulird" id="mnu2"> <asp:LinkButton ID="LBtnMenuDiet" runat="server" PostBackUrl="~/clients/Diet.aspx?activeid=m2">Current Diet - Meals</asp:LinkButton> </li> </ul>$(function () { var qy = window.location.search; if (qy != "") { var activeitem = qy.split('=')[1]; switch (activeitem) { case "m1": $("#mnu1 a").css("background-color", "red"); break; case "m2": $("#mnu2 a").css("background-color", "red"); break; } } })Best Regards,
Fei Han