Question

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

这是一个简短的内容;

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

    <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或全部。感谢。

Answer 1

您可以在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>

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

Answer 2

您可以使用以下方式获取当前页面名称：

$pageName = $_GET["source"];

然后，对于每个列表项，您可以执行以下操作：

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

当然，您需要设置课程.active的样式，或者您希望如何命名它。

Answer 3

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

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

突出显示基于当前页面的链接（动态导航PHP）

3 个答案: