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 

#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");
		}

		
    });

Open in new window

lulu50Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
Do you have javascript errors?

Because if the first regex execution doesn't find anything, getting the first item will throw an error. 
var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

Open in new window

Check the dev tools to see if you have javascript errors.
lulu50Author Commented:
no I am not getting any error
Alexandre SimõesManager / Technology SpecialistCommented:
Ah, I just had a closer look at your CSS, I think you're not setting the active class correctly.
Should be: 
#nav ul li.active {
    border-bottom:3px #FFF solid;
 	background-color:#a51d43;
    }

Open in new window

I removed the space between the li and the .active.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Get Your eBook
lulu50Author Commented:
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.
lulu50Author Commented:
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
Julian HansenCommented:
Where is your code showing the submit?
lulu50Author Commented: 
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>

Open in new window

Alexandre SimõesManager / Technology SpecialistCommented:
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?
lulu50Author Commented:
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
Alexandre SimõesManager / Technology SpecialistCommented:
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");
        }

Open in new window

If it works it should still be optimized, but for the time being it's enough just to test.
Julian HansenCommented:
AddRule.cfm?id=51 -> it will not highlights
It won't - you are testing your URL against the href of the link

AddRule.cfm?id=51 is not equal to AddRule.cfm

Open in new window

You need to strip out the filename from the URL like so

  var UrlParts = window.location.pathname.split( '/' );
  var url = UrlParts[UrlParts.length -1];

Open in new window

Try that instead of 
var url = /[^\\\/:*?"<>|\r\n]+$/i.exec(window.location.href)[0];

Open in new window

lulu50Author Commented:
Alexandre   and  Julian  Thank you both for all your help

IT WORKS :-)  

THANK YOU THANK YOU AND ONE MORE THANK YOU

Thanks,
lulu
lulu50Author Commented:
one more time THANK YOU LOL
Julian HansenCommented:
You are most welcome.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.