Change Url And Css When An Element Is Clicked

Basically, I have several pages on my website where I am using PHP to include the content in the page, and using jQuery to 'switch' between the content by setting the display in CS

Solution 1:

If you change the location of the window, all javascript from the current page will cease. You cannot expect javascript from one page to control content on another page. This would be a massive security violation.

You need the javascript to run on "aboutUs.php", or dynamically load the aboutUs content into your current page. Or, better still, have aboutUs.php have the correct css in the first place.

Solution 2:

Can't aboutUs.php just link to a CSS file that has the correct styles? Why do they need to be set in Javascript?

It also looks like the css() calls will be applied to the current page, and not the target page.

Solution 3:

Once you change the window.location property, the browser will redirect the user to the specified URL and the execution of JavaScript will stop immediately.

So your .css() function calls are not being run but that doesn't matter much because they would be altering the DOM on the current page, not the next page.

Those .css() function calls need to be run on the next page, something like this:

First Page --

$(function(){
    $('#ourMissionMenu').click(function() {
        window.location = 'http://beta.***.com/aboutUs.php';
    });
});

Second Page (aboutUs.php) --

$(function(){
    $('#rightReplace').css({
        display:"none"
    });
    $('#ourHistory').css({
        display:"none"
    });
    $('#meetTeam').css({
        display:"none"
    });
    $('#communityOutreach').css({
        display:"none"
    });
    $('#connectUs').css({
         display:"none"
    });
    $('#blog').css({
        display:"none"
    });
    $('#ourMission').css({
        display:"block"
    });
});

But this would be pretty strange if you are dynamically building the aboutUs.php page. You might as well leverage your use of PHP and set the display of the element with PHP instead of JavaScript (which is client-side, meaning it requires the user's browser to do work).

Solution 4:

On top of what Paul and Sérgio mentioned, you can concoct the selectors like below rather than multiple blocks.

$('#rightReplace,#ourHistory,#meetTeam,#communityOutreach,#connectUs,#blog,#ourMission').hide();