Alter the URL and CSS upon clicking an element

Question

Alter the URL and CSS upon clicking an element

Currently, I am faced with a challenge on my website where I have multiple pages that utilize PHP to include content and jQuery to toggle the display of said content by adjusting CSS properties. However, I am encountering difficulty in implementing this functionality on the main page which features a menu system. I am seeking a solution where clicking a menu link will not only navigate to the corresponding page but also apply the appropriate CSS rules to show the relevant content. Here is what I have attempted so far (URL redacted):

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

javascript jquery css

Answer 1

Answer №1

Relocating the window will result in the termination of all javascript operations on the current page. It is not feasible for javascript from one page to manipulate content on another page due to security concerns.

To ensure proper functionality, it is recommended to run the javascript on "aboutUs.php" or load the aboutUs content dynamically into the current page. Alternatively, consider having the correct css implemented on aboutUs.php initially.

Answer 2

Relocating the window will result in the termination of all javascript operations on the current page. It is not feasible for javascript from one page to manipulate content on another page due to security concerns.

To ensure proper functionality, it is recommended to run the javascript on "aboutUs.php" or load the aboutUs content dynamically into the current page. Alternatively, consider having the correct css implemented on aboutUs.php initially.

Answer 3

Answer №2

Why can't aboutUs.php simply refer to a CSS file containing the necessary styles? Is there a specific reason for setting them in Javascript?

Furthermore, it appears that the css() functions are affecting the current page rather than the intended target page.

Answer 4

Why can't aboutUs.php simply refer to a CSS file containing the necessary styles? Is there a specific reason for setting them in Javascript?

Furthermore, it appears that the css() functions are affecting the current page rather than the intended target page.

Answer 5

Answer №3

After updating the window.location property, the browser will promptly redirect the user to the specified URL and halt the execution of JavaScript.

As a result, your .css() function calls are not executed immediately. Nonetheless, this is inconsequential since they would only impact the DOM of the current page, not the subsequent one.

To ensure these .css() function calls take effect on the next page, consider the following approach:

First Page --

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

Second Page (aboutUs.php) --

$(function(){
    $('#rightReplace').css({
        display:"none"
    });
    // Rest of CSS changes here
});

If you are dynamically generating the aboutUs.php page, it might be more effective to utilize PHP for setting element displays instead of relying solely on JavaScript (which runs on the client-side).

Answer 6

After updating the window.location property, the browser will promptly redirect the user to the specified URL and halt the execution of JavaScript.

As a result, your .css() function calls are not executed immediately. Nonetheless, this is inconsequential since they would only impact the DOM of the current page, not the subsequent one.

To ensure these .css() function calls take effect on the next page, consider the following approach:

First Page --

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

Second Page (aboutUs.php) --

$(function(){
    $('#rightReplace').css({
        display:"none"
    });
    // Rest of CSS changes here
});

If you are dynamically generating the aboutUs.php page, it might be more effective to utilize PHP for setting element displays instead of relying solely on JavaScript (which runs on the client-side).

Answer 7

Answer №4

In addition to the points raised by Paul and Sérgio, you have the option of creating a single selector instead of using multiple blocks as shown below:

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

Answer 8

In addition to the points raised by Paul and Sérgio, you have the option of creating a single selector instead of using multiple blocks as shown below:

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

Alter the URL and CSS upon clicking an element

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can one effectively overcome the constraint in HTML5 canvas that prevents altering the positions of previously sketched elements?

Calculating the sum of all elements in an array

Learn the process of extracting a particular value from JSON data and displaying it in HTML by utilizing AngularJS's ng-repeat directive

The footer is being covered by the section, despite my attempts to address the issue with

What are the available methods for incorporating node.js dependencies into a Python package?

Tips for selecting an element within a span by clicking on it?

Rewriting Next.js with custom headers

What is the correct way to run javascript on a DOM element when ng-show is triggered?

What steps can I take to display a download button when a file is clicked on?

Variable unique to the specific function in universal function

`CORS (Cross Origin Resource Sharing)`

What is the best way to create a complex JSON array and send it as a parameter in an ajax request?

What steps are involved in implementing Local fonts in theme UI for Next JS?

Having trouble getting data to send to node.js server using $.ajax post

Route is searching for static files in the incorrect directory

If an array is present in the object, retrieve the array item; otherwise, retrieve the field

What is causing the z-index to not function properly on my elements?

Did the IBM MobileFirst client miss the call to handleFailure?

Assign a temporary value to the Select component in Material UI version 1.0.0-beta.24

"Displaying an array using React Hooks' useState causes the content to