Question

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 CSS to “none” or “block”. However, I am struggling to get it to work in the main page with the menu. So I need when the user clicks on the appropriate link, the page will change to the page where the content is contained, but also apply the appropriate CSS as to display the appropriate content. So far I have (URL blocked out):

<script type="text/javascript">
    $(document).ready(function(){
        $('#ourMissionMenu').click(function() {
                window.location = 'http://beta.***.com/aboutUs.php';
                $('#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"
                  }); 
        });
});


</script>

Answer 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.