How to create internal links (href="#..." / PHP & Bootstrap - php

Question

New to coding in general. Creating a simple small website as a class assignment. Using PHP with no frameworks and Bootstrap for the HTML-CSS. Cannot use JavaScript as per assignment requirements.
I cannot find how to properly create internal links in a page.
I use the URL to decide which page to show (all dealt from index.php). Links (via href) to diferent pages in the same website or external links work fine.
But when I try to use what normally would be href="#idName" for a link pointing to the same page, it doesn't work.
I assume it has something to do with how this information goes to the URL and is interpreted by the index.php. But besides that, I'm lost.
Maybe because I don't have the right vocabulary to search for it, but so far, no luck when looking for the answer online.
Part of the index.php:
if (isset($_GET['action'])){
if($_GET['action'] == 'profil-membre'){
include('pages/header_menu.html');
include('pages/profil-membre.php');
}elseif ($_GET['action'] == 'page-activite'){
include('pages/header_menu.html');
include('pages/page-activite.php');
}
}else{
include('pages/header_menu.html');
//and below the html for the main page.
?>
And part of the html in the pages where I would like an internal link:
<!--a menu as tabs (showing just the part with the problematic href-->
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#membre-exist">Membre Existant</a>
</li>
<!-- the href should point to the div with id "membre-exist" -->
<div class="tab-content card card-body mb-4">
<div id="membre-exist" class="container tab-pane fade"><br>
<form action=""> <!-- and the html code follows normally -->
Any ideas or links to where I could find the information to solve this would be appreciated!!

Answer 1

If I understand the question correctly, you can use :target CSS pseudo element and use that to show the contents using display. I am doing something really simple for you.
* {margin: 0; padding: 0; line-height: 1; font-family: 'Segoe UI'; text-align: center; border-radius: 5px;}
a {display: inline-block; padding: 5px; border: 1px solid #ccf; background-color: #eef; text-decoration: none;}
a:active, a:focus {background: #f90; border-color: #f60;}
section {margin: 10px; padding: 10px; border: 1px solid #ccf; background-color: #f5f5f5; display: none;}
section:target {display: block;}
one
two
three
four
<section id="one">
This is section one.
</section>
<section id="two">
This is section two.
</section>
<section id="three">
This is section three.
</section>
<section id="four">
This is section four.
</section>
The above code acts like a tab view and it doesn't have any JavaScript or Server Side code. It purely relies on the #hashvalue that's passed to the URL. The above code perfectly matches with your requirement:
Doesn't use any server side language.
Doesn't require JavaScript for this.
It's a pure CSS way of doing things.