link to div on seperate page and highlight div on click of link

Question

I am trying to highlight a specific div onclick of link on the side navigation. So far it works (when on the default page) but when you go to a different page and then click an item in the side navigation, it will anchor down to the specified div, but not highlight. I would need to RECLICK the link in order for it to highlight.

var App = {
    SetBaseLine: function() {
    jQuery("#priceRange, #satisfaction").removeClass("activeListColor");
    }
};

jQuery(document).ready(function() {
    jQuery('a#priceLink').click(function(e) {
        App.SetBaseLine();
        jQuery('#priceRange').addClass('activeListColor');
    });
    jQuery('a#satisfactionLink').click(function(e) {
        App.SetBaseLine();
        jQuery('#satisfaction').addClass('activeListColor');
    });


    <div id="priceRange">
            <div class="header">Price Range<br /><a id="button1" href="javascript:toggle3('colcontent1','button1');" ><img src="images/more-info-button.png" width="76" height="20" /></a></div>
            <div class="col2 topSpace">Packages  start at $29.99/month</div>
            <div class="col3"><span>Best Value</span><img src="images/red-trophy.png" class="trophy" /><br />Packages  start at $19.99/month</div>
            <div class="col4 topSpace">Packages  start at $29.99/month</div>
    </div> <!-- End of priceRange div -->

<div id="satisfaction">
         <div class="header">Customer Satisfaction <br /><a id="button2" href="javascript:toggle3('colcontent2','button2');" ><img src="images/more-info-button.png" width="76" height="20" /></a></div>
            <div class="col2 topSpace">American  Customer Satisfaction Index (ACSI) Rating: 68 </div>
            <div class="col3"><span>Most Popular</span><img src="images/red-trophy.png" class="trophy" /><br />American  Customer Satisfaction Index (ACSI) Rating: 71 </div>
            <div class="col4 topSpace">American  Customer Satisfaction Index (ACSI) Rating: 61 </div>
    </div> <!-- End of satisfaction div -->

Any suggestions??

Your jQuery ready function has no closing `});`. Is that just a copy/paste omission, or is this your actual code? — Surreal Dreams, Jun 07 '12 at 20:42
I think you need to pass the page parameter to the new page. Stackoverflow have this strategy for highlighting comments or answers. http://stackoverflow.com/questions/10898496/accessing-json-in-external-server/10898669#comment14208639_10898669 — Tooraj Jam, Jun 07 '12 at 20:43
To Tooraj - I am not sure which part you are talking about? Could you clarify? — maddev, Jun 07 '12 at 20:46
you need to check the url if an anchor exist on load page not only on click event — khaled_webdev, Jun 07 '12 at 21:25

score 0 · Accepted Answer · answered Jun 07 '12 at 21:16

When you change page, the DOM isn't ready in time for removing and adding highlight classes.

So what you could do is set a global variable and whenever you load the page with list items you would like to highlight, you check the value of that variable and highlight the corresponding list item, and then nullify it.

link to div on seperate page and highlight div on click of link

1 Answers1