How to create internal links (href=“#…” / PHP & Bootstrap

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

 <a href="#one">one</a> <a href="#two">two</a> <a href="#three">three</a> <a href="#four">four</a> <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.