On page load set a certain style to a LI element

Question

I have a page with the following menu:

https://jsfiddle.net/dva4zo8t/

Based on which menu button is clicked, the color changes and I can "remember" (set) the color on a new page load, like so:

$('[id*="button"]').click(function() {
    $('.topmenu-ul li').removeClass();
    $(this).addClass('topmenu-selected' + $('a', this).attr('class'));
});

I also want to set a style to the LI element (a different background color and a red highlighted text) once the page loads. So, when I click on "New Appointment", on the new page, the LI element should look like this:

So what I basically want is to change the class of the sub li just as I do with the main buttons, for example:

$('#redbutton').addClass('topmenu-selectedred');
$('.topmenu-tab-appointments').show();

Answer 1

I´ve created a fiddle that will make the buttons turn it´s background when pushed.

then you will make to them tu "unpush" when others are pushed.

try this fiddle.

  $(".topmenu-ul li").click(function() { $('li > #topmenu-ul').hide(); $(this).children("ul").toggle(); }); $('[id*="button"]').click(function() { $('.topmenu-ul li').removeClass(); $(this).addClass('topmenu-selected' + $('a', this).attr('class')); }); $('.topmenu-ul li a').click(function() { $(this).addClass('topmenu-selectedsub'); }); 

 * { margin: 0; padding: 0; overflow: auto; } html, body { height: 100% } header, footer, article, section, hgroup, nav, figure { display: block } body { font-size: 1em; color: #fcfcfc; background-color: #f8f4eb; font-family: Verdana, Arial, Helvetica, sans-serif; } /* * HTML5 Sections */ .header { height: 72px; margin: 0; padding: 0; background-color: #fff; overflow: hidden; } .nav { position: relative; height: 52px; margin: 0; padding: 0; overflow: hidden; } .main { position: relative; min-height: calc(100% - 124px); background-color: #f8f4eb; } .aside { float: left; width: 195px; background-color: #ebddca; height: 100%; } /* * Top Menu Styles */ .topmenu { background: -webkit-linear-gradient(#858585, #636263); border-top: 1px solid #656565; border-bottom: 1px solid #3663ab; box-shadow: inset 0 1px 0 #a8a8a8; height: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000 } .topmenu-header { height: 4px; background: -webkit-linear-gradient(top, #f5efe4 0%, #d3cdbe 100%); border-top: 1px solid #d5cab8 } .topmenu-subbg { padding-left: 5px; left: 0; width: 100%; height: 24px; top: 30px; background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px); border-bottom: 1px solid #d3c7b6 } .topmenu-ul, li, a { margin: 0; padding: 0; cursor: pointer; } .topmenu-ul li { list-style: none } a { text-decoration: none; color: #000 } .topmenu-ul > li { float: left; display: inline; list-style: none; white-space: nowrap; border-right: 1px solid #414141; box-shadow: 1px 0 0 0 rgba(165, 162, 165, 1) } .topmenu-ul > li a { color: #e6e6e6; font-size: .7rem; line-height: 20px; height: 20px; display: block; padding: 0 20px } .topmenu-ul > li a:hover { color: #fff } .topmenu-ul li ul li a:hover { background-color: #f3efe5 } .topmenu-ul li ul { font-size: 0; display: none; list-style: none; position: absolute; top: 27px; left: -8px; } .topmenu-ul li ul li a { color: #000; line-height: 24px; height: 24px; font-weight: normal; } .topmenu-ul li ul li a:hover { color: red; } .topmenu-ul li ul li { display: inline-block; list-style: none; white-space: nowrap; line-height: 24px; height: 24px; background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px); border-bottom: 1px solid #d3c7b6; border-right: 1px solid #d5ccbe } .topmenu-ul > [class*=topmenu-selected] > a { color: #fff; } .topmenu-selectedblue { color: #fff; font-weight: 700; background: -webkit-linear-gradient(#78b1ff, #4881dc) } .topmenu-selectedred { color: #fff; font-weight: 700; background: -webkit-linear-gradient(#ff8476, #dc5348) } .topmenu-selectedpurple { color: #fff; font-weight: 700; background: -webkit-linear-gradient(#b479ff, #854ade) } .topmenu-selectedgreen { color: #fff; font-weight: 700; background: -webkit-linear-gradient(#9dd592, #649f5a) } .topmenu-selectedsub { background-color: #f3efe5 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="nav"> <div class="topmenu-header"></div> <div class="topmenu"> <ul class="topmenu-ul"> <li id="bluebutton"><a class="blue">Home</a> <ul id="topmenu-ul" class="topmenu-tab-home"> <li><a href="{{ route('dashboard') }}">Dashboard</a> </li> </ul> </li> <li id="redbutton"><a class="red">Appointments</a> <ul id="topmenu-ul" class="topmenu-tab-appointments"> <li><a href="#">Appointments</a> </li> <li><a id="new" href="#">New Appointment</a> </li> </ul> </li> <li id="greenbutton"><a class="green">Contacts</a> <ul id="topmenu-ul" class="topmenu-tab-contacts"> <li><a href="#">Contacts</a> </li> <li><a href="#">New Contact</a> </li> </ul> </li> </ul> </div> </nav> 

EDIT

Anyway, if you want to do it after page is loaded, you can use document.ready :

$( document ).ready(function() {
  //JUST ADD AN ID TO THE BUTTON AND THIS WILL CHANGE IT´S BACKGROUND AFTER PAGE LOADS
   $("#new").addClass('topmenu-selectedsub');
});

There is the demo:

 $( document ).ready(function() { //JUST ADD AN ID TO THE BUTTON AND THIS WILL CHANGE IT´S BACKGROUND AFTER PAGE LOADS $('#new').addClass('topmenu-selectedsub'); $('.topmenu-tab-appointments').show(); }); $(".topmenu-ul li").click(function() { $('li > #topmenu-ul').hide(); $(this).children("ul").toggle(); }); $('[id*="button"]').click(function() { $('.topmenu-ul li').removeClass(); $(this).addClass('topmenu-selected' + $('a', this).attr('class')); }); $('.topmenu-ul li a').click(function() { $(this).addClass('topmenu-selectedsub'); }); 

 * { margin: 0; padding: 0; overflow: auto; } html, body { height: 100% } header, footer, article, section, hgroup, nav, figure { display: block } body { font-size: 1em; color: #fcfcfc; background-color: #f8f4eb; font-family: Verdana, Arial, Helvetica, sans-serif; } /* * HTML5 Sections */ .header { height: 72px; margin: 0; padding: 0; background-color: #fff; overflow: hidden; } .nav { position: relative; height: 52px; margin: 0; padding: 0; overflow: hidden; } .main { position: relative; min-height: calc(100% - 124px); background-color: #f8f4eb; } .aside { float: left; width: 195px; background-color: #ebddca; height: 100%; } /* * Top Menu Styles */ .topmenu { background: -webkit-linear-gradient(#858585, #636263); border-top: 1px solid #656565; border-bottom: 1px solid #3663ab; box-shadow: inset 0 1px 0 #a8a8a8; height: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000 } .topmenu-header { height: 4px; background: -webkit-linear-gradient(top, #f5efe4 0%, #d3cdbe 100%); border-top: 1px solid #d5cab8 } .topmenu-subbg { padding-left: 5px; left: 0; width: 100%; height: 24px; top: 30px; background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px); border-bottom: 1px solid #d3c7b6 } .topmenu-ul, li, a { margin: 0; padding: 0; cursor: pointer; } .topmenu-ul li { list-style: none } a { text-decoration: none; color: #000 } .topmenu-ul > li { float: left; display: inline; list-style: none; white-space: nowrap; border-right: 1px solid #414141; box-shadow: 1px 0 0 0 rgba(165, 162, 165, 1) } .topmenu-ul > li a { color: #e6e6e6; font-size: .7rem; line-height: 20px; height: 20px; display: block; padding: 0 20px } .topmenu-ul > li a:hover { color: #fff } .topmenu-ul li ul li a:hover { background-color: #f3efe5 } .topmenu-ul li ul { font-size: 0; display: none; list-style: none; position: absolute; top: 27px; left: -8px; } .topmenu-ul li ul li a { color: #000; line-height: 24px; height: 24px; font-weight: normal; } .topmenu-ul li ul li a:hover { color: red; } .topmenu-ul li ul li { display: inline-block; list-style: none; white-space: nowrap; line-height: 24px; height: 24px; background: -webkit-linear-gradient(top, #c8bfb0 0px, #f5efe6 7px); border-bottom: 1px solid #d3c7b6; border-right: 1px solid #d5ccbe } .topmenu-ul > [class*=topmenu-selected] > a { color: #fff; } .topmenu-selectedblue { color: #fff; font-weight: 700; background: -webkit-linear-gradient(#78b1ff, #4881dc) } .topmenu-selectedred { color: #fff; font-weight: 700; background: -webkit-linear-gradient(#ff8476, #dc5348) } .topmenu-selectedpurple { color: #fff; font-weight: 700; background: -webkit-linear-gradient(#b479ff, #854ade) } .topmenu-selectedgreen { color: #fff; font-weight: 700; background: -webkit-linear-gradient(#9dd592, #649f5a) } .topmenu-selectedsub { background-color: #f3efe5 } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="nav"> <div class="topmenu-header"></div> <div class="topmenu"> <ul class="topmenu-ul"> <li id="bluebutton"><a class="blue">Home</a> <ul id="topmenu-ul" class="topmenu-tab-home"> <li><a href="{{ route('dashboard') }}">Dashboard</a> </li> </ul> </li> <li id="redbutton"><a class="red">Appointments</a> <ul id="topmenu-ul" class="topmenu-tab-appointments"> <li><a href="#">Appointments</a> </li> <li><a id="new" href="#">New Appointment</a> </li> </ul> </li> <li id="greenbutton"><a class="green">Contacts</a> <ul id="topmenu-ul" class="topmenu-tab-contacts"> <li><a href="#">Contacts</a> </li> <li><a href="#">New Contact</a> </li> </ul> </li> </ul> </div> </nav> 

Answer 2

To do this you would normally use a sever side language to set a class on loading the page (ie; on the About page add the class about-page to body, or the class current to the about link). But to do it with jQuery only you would need to know the urls of the pages.

 $(document).on('ready', function(){ var $links = $('nav a'), links_array = [], current_url = window.location.pathname, current_link_idx; // we dont have an actual url so we'll pretend here // for the sake of the snippet/preview current_url = '/about'; $links.each(function(){ links_array.push($(this).attr('href')); }); current_link_idx = links_array.indexOf(current_url); $links.eq(current_link_idx).addClass('current-page'); }); 

 .current-page { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <nav> <a href="/about">About</a> <a href="/contact">Contact</a> <a href="/etc">Etc</a> </nav> 

Obviously, if you have complex nav/urls, this isn't bulletproof. You'll need to do some fiddling with the current_url , maybe splitting it into fragments.

Still, this is best done server side.

Answer 3

See this working Demo

 $(".topmenu-ul li").click(function() {
        $('li > #topmenu-ul').hide();
        $(this).children("ul").toggle();
        $(".topmenu-ul li").css("background-color","")
        $(this).css("background-color","red")
    });
$('[id*="button"]').click(function() {
        $('.topmenu-ul li').removeClass();
        $(this).addClass('topmenu-selected' + $('a', this).attr('class'));

    });

    $("#topmenu-ul li a").click(function() {


        $("#topmenu-ul li a").css("background-color","")
        $(this).css("background-color","red")
    });

You can put whatever color you like to add. Its upto you , I have just shown you how to do it