如何創建內部鏈接（href =“＃…” / PHP和Bootstrap

Question

一般而言，是編碼的新手。 創建一個簡單的小型網站作為課程分配。 使用沒有框架的PHP和HTML-CSS的Bootstrap。 無法根據分配要求使用JavaScript。

我找不到如何在頁面中正確創建內部鏈接的方法。

我使用URL來決定顯示哪個頁面（全部由index.php處理）。 指向同一網站中不同頁面的鏈接（通過href）或外部鏈接都可以正常工作。

但是，當我嘗試使用通常將href =“＃idName”指向指向同一頁面的鏈接時，它將無法正常工作。

我認為這與該信息如何到達URL以及由index.php解釋有關。 但是除此之外，我迷路了。

也許是因為我沒有合適的詞匯來搜索它，但是到目前為止，在網上尋找答案時還沒有運氣。

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

我想要內部鏈接的頁面中的html部分：

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

任何想法或鏈接，我可以在其中找到解決問題的信息！

Answer 1

如果我對問題的理解正確，則可以使用:target CSS偽元素，並使用display元素顯示內容。 我正在為您做一些非常簡單的事情。

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

上面的代碼就像一個選項卡視圖，並且沒有任何JavaScript或服務器端代碼。 它純粹依賴於傳遞給URL的#hashvalue 。 上面的代碼完全符合您的要求：

• 不使用任何服務器端語言。
• 不需要JavaScript。

這是一種純CSS的處理方式。