Link (internal php / html file) from navigation bar to main section within the same page
Question
I'm fairly new to PHP / HTML / CSS . I'm trying to copy / mimic an internal website we're using at work, the current code is quite old (still using frames for example).
Currently, I'm stuck at trying to open a link (internal php / html file) from the navigation bar to the main section of the same page. I thought I found a workaround with the include syntax in php, hiding all the pages with css, and only showing the one you clicked on. But I found out fairly quickly that this wouldn't work in my situation, because when you open index.php in a browser, every .php or .html is loaded in the background. Our internal website uses a lot of different .php files, so load times wouldn't be optimal I think.
What I'm trying to achieve: only load the .php or .html link when clicked on in the navigation bar, and open it in the main section of the same page.
Does anyone have a solution for my problem? Thank in advance!
What I'm trying to achieve:
body { margin: 0; padding: 0; overflow: hidden; height: 100%; max-height: 100%; font-family: Sans-serif; line-height: 1.5em; } #header { position: absolute; top: 0; left: 0; width: 100%; height: 150px; overflow: hidden; /* Disables scrollbars on the header frame. To enable scrollbars, change "hidden" to "scroll" */ background: #4B84CF; background-image: url(./images/headerbackground.jpg); background-position: right top; background-size: 30%; background-repeat: no-repeat; } #nav { position: absolute; top: 150px; /* Set this to the height of the header */ left: 0; bottom: 0; width: 230px; overflow: auto; /* Scrollbars will appear on this frame only when there's enough content to require scrolling. To disable scrollbars, change to "hidden", or use "scroll" to enable permanent scrollbars */ background: rgb(75, 132, 207); background: linear-gradient(90deg, rgba(75, 132, 207, 1) 70%, rgba(75, 132, 207, 0.7567401960784313) 85%); } #logo { padding: 10px; } main { position: fixed; top: 150px; /* Set this to the height of the header */ left: 230px; right: 0; bottom: 0; overflow: auto; background: #ffffff; } .innertube { margin: 15px; /* Provides padding for the content */ } p { color: #555; } nav h1 { list-style-type: none; margin: 5; padding: 5px; border: 4px solid#C33C54; border-radius: 10px; color: white; font-size: 100%; text-shadow: 4px 4px 4px #c33c54; text-align: center; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ } nav ul { list-style-type: none; margin: 5; padding: 5px; border: 4px solid#C33C54; border-radius: 10px; color: white; font-size: 100%; text-shadow: 4px 4px 4px #c33c54; text-align: center; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ text-decoration: none; } nav ul a { list-style-type: none; margin: 5; padding: 5px; color: white; font-size: 100%; text-shadow: 4px 4px 4px #c33c54; text-align: center; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ text-decoration: none; } /*IE6 fix*/ * html body { padding: 100px 0 0 230px; /* Set the first value to the height of the header and last value to the width of the nav */ } * html main { height: 100%; width: 100%; } /* This hides all pages */ .page { display: none; } /* This displays the first page */ .default { display: block; } /* This displays the page corresponding to the one you clicked on */ :target { display: block; } /* This hides the default page when another page is clicked */ :target~.default { display: none; }
<!DOCTYPE html> <html> <link rel="stylesheet" type="text/css" href="index_style.css"> <head> <title>Test index-pagina</title> </head> <body> <header id="header"> <div id="clock"> <?php include ('clock.php');?> </div> </header> <main> <div class="innertube"> <div id="navtest" class="page"> <?php include ('navtest.php');?> </div> <div id="welkom" class="page"> <?php include ('welkom.php');?> </div> <div id="about" class="page"> <?php include ('about.html');?> </div> </div> </main> <nav id="nav"> <div class="innertube"> <h1>Navigation bar 1</h1> <ul> <li><a href="#navtest">Navtest</a></li> <li><a href="#welkom">Welkom</a></li> <li><a href="#about">About</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> <h1>Navigation bar 2</h1> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </div> </nav> </body> </html>
1 answers
solution1
2 ACCPTED 2019-12-27 11:40:29
You can use JavaScript to find out which button is clicked and used jQuery's load() function to render the php content on your page element.
Just add a dataset attribute to your li elements say, data-page and add a unique id or name to that data-page attribute. I would recommend that you use the file names of the pages you want to load so it would be easier to load it later as you will see in the example snippet below.
You can now use JavaScript to retrieve that dataset value, concatenate it with a .php extension and then use the jQuery's load() function to render the content to the page.
Check and run the following Code Snippet or open this JSFiddle for a practical example of the above approach:
const links = document.querySelectorAll("#nav li a"); links.forEach( function(e) { e.addEventListener("click", function() { let goToPage = e.dataset.page; $("#page").load(goToPage + ".php"); }); })
<main> <div class="innertube"> <div id="page"> <!-- Content will be shown here --> </div> </div> </main> <nav id="nav"> <div class="innertube"> <h1>Navigation</h1> <ul> <li><a data-page="navtest">Navtest</a></li> <li><a data-page="welkom">Welkom</a></li> <li><a data-page="about">About</a></li> <li><a data-page="somePage1">Link 4</a></li> <li><a data-page="somePage2">Link 5</a></li> </ul> </div> </nav>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.