asked on Activating Menu
Hi,
I have a menu, when the user click on the menu it should get a background color to #a51d43
this is what i have and it's not working
I have a menu, when the user click on the menu it should get a background color to #a51d43
this is what i have and it's not working
#nav ul li a {
/* margin:10px; */
color:#FFF;
/* padding:4px;
font-size:20px;
text-decoration:none; */
}
#nav ul li a:hover {
border-bottom:3px #FFF solid;
background-color:#000000;
}
#nav ul li .active {
border-bottom:3px #FFF solid;
background-color:#a51d43;
}
<menu id="nav">
<ul class="categories" style="font-size:12px;color:#ffffff;">
<li><a href="index.cfm" class="index" style="padding-left:-5px; padding-right:15px;color:#ffffff;font-weight:bold;">Home</a></li>
<li><a href="#" class="VersionHist" style="color:#ffffff;font-weight:bold;">Version History</a></li>
<li><a href="AddRule.cfm" class="AddRule" target="_self" style="color:#ffffff;font-weight:bold;">Add New Testing Rule</a></li>
</ul>
</menu>
$(document).ready(function () {
$.ajaxSetup({ cache: false });
var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];
// passes on every "a" tag
$("#nav ul li a").each(function() {
// checks if its the same on the address bar
if(url == (/[^\\\/:*?"<>|\r\n]+$/i.exec(this.href)[0])) {
$(this).closest("li").addClass("active");
}
else if(url == "Index.cfm"){
$(".Alert").closest("li").addClass("active");
}
else if(url == "AddRule.cfm"){
$(".Alert").closest("li").addClass("active");
}
});
jQueryCSSJavaScript
Last Comment
Julian Hansen
ASKER
no I am not getting any error
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Alexandre
yes, that is correct that I had the active CSS wrong
but when I submit the form to itself I lose my active style
so when I click on the menu I do get the background changed, but when I submit the page to itself the background goes back to the default color.
yes, that is correct that I had the active CSS wrong
but when I submit the form to itself I lose my active style
so when I click on the menu I do get the background changed, but when I submit the page to itself the background goes back to the default color.
ASKER
if the url is this -> AddRule.cfm -> it works fine
but
when I submit the page to itself
AddRule.cfm?id=51 -> now this does not work because it has id=51
but
when I submit the page to itself
AddRule.cfm?id=51 -> now this does not work because it has id=51
Where is your code showing the submit?
ASKER
oh it goes to SubmitRule.cfm for an insert than go back to the same page that's when I lose my menu.
<FORM id="UnitTestingFrm" NAME="UnitTestingFrm" METHOD="POST" ACTION="SubmitRule.cfm?id=<cfoutput>#PID#</cfoutput>">
<button name="SubRule" id="SubRule" type="submit" style="border: 0; background: transparent;cursor:pointer;" >
<img src="images/NextBtn.jpg" alt="Next" />
</button>
</FORM>
Let me see if I get it right:
So if you do Ctrl+F5 it highlights the menu but if you click that highlighted menu item, it refreshes the page but doesn't get highlighted back.
is that it?
So if you do Ctrl+F5 it highlights the menu but if you click that highlighted menu item, it refreshes the page but doesn't get highlighted back.
is that it?
ASKER
If I click on the menu it will highlights but if I add (id=51) in the URL and click on enter
it will not highlights.
AddRule.cfm?id=51 -> it will not highlights
it will not highlights.
AddRule.cfm?id=51 -> it will not highlights
Ok, so what you need should be something like:
if (url == (/[^\\\/:*?"<>|\r\n]+$/i.exec(this.href)[0])) {
$(this).closest("li").addClass("active");
} else if (window.location.href.indexOf("Index.cfm") > 0) {
$(".Alert").closest("li").addClass("active");
} else if (window.location.href.indexOf("AddRule.cfm") > 0) {
$(".Alert").closest("li").addClass("active");
}
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Alexandre and Julian Thank you both for all your help
IT WORKS :-)
THANK YOU THANK YOU AND ONE MORE THANK YOU
Thanks,
lulu
IT WORKS :-)
THANK YOU THANK YOU AND ONE MORE THANK YOU
Thanks,
lulu
ASKER
one more time THANK YOU LOL
You are most welcome.
Because if the first regex execution doesn't find anything, getting the first item will throw an error.
Open in new window
Check the dev tools to see if you have javascript errors.