CI framework's problem with switching pages in the navigation bar

Environment

Designed a navigation bar as follows

Below the navbar is the text content.

Demand

A very simple design idea is: click the button above (such as about/blog, etc.), the main container will load the front-end page from the background.

Original design idea

We are using the CodeIgniter framework, and we plan to use Ajax to bind all the buttons in the navigation bar on the front end. Each button will trigger an ajax request. The back end specifically writes a public function to handle the front end ajax request, using $this ->load->view('xxx') Completes the reloading of the Main Container page and implements PHP modularization (header.js/footer.js ..etc).

Question

Since the container loaded each time is different, the static files used such as css|javascript|img are loaded differently in different containers, so the header and footer templates cannot be unified. If all static resources are unified If written in the template php, it will inevitably cause the page to load for too long.

I once thought about an alternative, adding the nav tag to each container, which can ensure that different static resources are loaded. However, the code maintenance after the formation will be more cumbersome, and the code duplication is not efficient enough.

So I would like to ask if there is any better solution??

Reply content:

Environment

Designed a navigation bar as follows

Below the navbar is the text content.

Demand

A very simple design idea is: click the button above (such as about/blog, etc.), the main container will

load the front-end page from the background.

Original design idea

We are using the CodeIgniter framework, and we plan to use

Ajax to bind all the buttons in the navigation bar on the front end. Each button will trigger an ajax request. The back end specifically writes a public function to handle the front end ajax request, using $this ->load->view('xxx') Completes the reloading of the Main Container page and implements PHP modularization (header.js/footer.js ..etc).

Question

Since the container loaded each time is different, the static files used such as

css|javascript|img are loaded differently in different containers, so the header and footer templates cannot be unified. If all static resources are unified If written in the template php, it will inevitably cause the page to take too long to load.. I once thought about an alternative, adding the nav tag to each container, which can ensure that different static resources are loaded. However, the code maintenance after the formation will be more cumbersome, and the code duplication is not efficient enough.

So I would like to ask if there is any better solution??