突出显示基于当前页面的链接(动态导航PHP) - Highlight link based on current page (Dynamic Navigation PHP)

Highlight link based on current page (Dynamic Navigation PHP)

这对一些人来说可能很容易，但我已经尝试了各种方法来让它工作，但无济于事。

文字简介;

我有一个页面，我有链接在这个页面，当点击加载其他页面，但显示在同一页面

    <section class="posts-header">
    <div class="col span-3-of-3">
    <ul class="posts-nav" id="navigation">
    <li><a href="blog_admin_posts.php?source=view_all_posts">View Posts</a></li>
    <li><a href="blog_admin_posts.php?source=view_posts">View Posts</a></li>
    <li><a href="blog_admin_posts.php?source=add_posts">Create Post</a></li>
    </ul>
    </div>
    </section>

上面的代码显示了当单击链接时，使用$_GET将变量传递给下面的switch语句;

if(isset($_GET['source'])) {
$source = $_GET['source'];}
switch($source) {
case 'view_posts';
    include "php/blog_posts_view.php";
    break;
case 'view_all_posts';
    include "php/blog_posts_reviewer.php";
    break;
case 'add_posts';
    include "php/blog_posts_addform.php";
    break;
case 'edit_posts';
    include "php/blog_posts_editform.php";
    break;
default:
    include "php/blog_posts_view.php";
    break;}

如何高亮显示当前页面?使用html, js, css3或所有。谢谢。

您可以在CSS中定义一个active类，它描述了活动链接的样式。例如，一个非常简单的样式:

.active {
    color: red;
}

然后你必须修改你的菜单:

<section class="posts-header">
    <div class="col span-3-of-3">
        <ul class="posts-nav" id="navigation">
            <li><a href="blog_admin_posts.php?source=view_all_posts"<?=$_GET['source'] == "view_all_posts" ? " class='"active'"" : ""; ?>>View Posts</a></li>
            <li><a href="blog_admin_posts.php?source=view_posts"<?=$_GET['source'] == "view_posts" ? " class='"active'"" : ""; ?>>View Posts</a></li>
            <li><a href="blog_admin_posts.php?source=add_posts"<?=$_GET['source'] == "add_posts" ? " class='"active'"" : ""; ?>>Create Post</a></li>
        </ul>
    </div>
</section>

活动菜单链接文本现在应该显示为红色

也许你会发现这非常有用，它可以将你的类添加到当前页面，并允许通过简单地添加到数组中来添加更多的链接到你的页面。

<?php
    $page = isset($_GET['page']) ? $_GET['page']:  ' ';
    $pages = ['view_all_posts','view_posts','add_posts'];
    $active = '';
    if (in_array($page,$pages)){
        $active = 'active';
    }
 ?>

然后修改你的菜单:

<section class="posts-header">
  <div class="col span-3-of-3">
    <ul class="posts-nav" id="navigation">
    <?php foreach ($pages as $key => $value) : ?>
      <li>
        <a href="blog_admin_posts.php?source=<?=$value?>" class="<?=$active?>"><?=$value?></a>
      </li>
    <?php endforeach;?>
    </ul>
  </div>
</section>

您可以使用以下命令获取当前页面名称:

$pageName = $_GET["source"];

然后，对于每个列表项，你可以这样做:

<li class="<?= ($pageName === 'firstPageName') ? 'active' : '' ?>"><a href="...">...</a></li>

当然，你需要样式类.active或任何你想命名它