如何创建内部链接（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的处理方式。