PHP & CSS - 导航栏未突出显示当前选项卡答案

【问题标题】：PHP & CSS - nav bar not highlighting the current tabPHP & CSS - 导航栏未突出显示当前选项卡
【发布时间】：2018-11-19 10:52:19
【问题描述】：

我正在尝试在单击时显示具有以下选项卡式导航栏的网页：

但我得到了这个结果，即使我多次点击链接：

（请忽略文本，这些是参考书中的示例）下面是我的代码：

<?php
// complete code for index.php
// reporting error if any
error_reporting(E_ALL);
ini_set("display_errors", 1);

// main code
include_once "classes/page_data.class.php";
$pageData = new stdClass(); // (old) declaring a new anonymous class object
$pageData->title = "My Portfolio";  // setting title name;
$pageData->content = include_once "views/navigation.php"; // setting content to page_data() class object
$pageData->css = "<link href='css/layout.css' rel='stylesheet' />"; // CSS stylesheet added from css folder
//changes end here

// URL variable starts here
$navigationIsSet = $_GET['page'];   // Click to get page URL via variable 'page' in $_GET['page url'] superglobal array
if ($navigationIsSet)   // checking if a page has been clicked
    $fileToLoad = $_GET['page'];    //get the clicked page's URL value
else
    $fileToLoad = 'skills';     // default page view
$pageData->content .= include_once "views/$fileToLoad.php"; // concatenate URL in the content
//URL variable ends here

//new code below: dynamic style added below
$pageData->embeddedCSS = "
<style>
nav a[href *= \'?page=$fileToLoad\']:visited{
padding:3px;
background-color:white;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
</style>";

$page = include_once "templates/page.php"; // linking pages
echo $page;
?>

这是来自layout.css 文件：

body{
    background-color: aliceblue;
}
nav {
    background-color: #CCCCDE;
    padding-top: 10px;
}
nav a{
    display: inline-block;
    text-decoration: none;
    color: #000000;
    margin-left: 10px;
}
nav a:hover {
    text-decoration: underline;
    font-style: italic;
}

如果你想查看page.php：

<?php
return  "<!DOCTYPE html> 
         <html>
         <head>
         <title>$pageData->title</title> 
         <meta http-equiv='Content-Type' content='test/html; charset=utf-8'/>
         </head>
         <body>
         $pageData->content
         $pageData->css
         </body>
         </html>";
         ?>

现在该参考书具有几乎相同的代码来生成快照 1，而我的代码在用户单击链接时没有显示选项卡式导航栏。你能帮我找出index.php动态样式有什么问题吗？我使用 PHPStorm 和 PHP 7.2 作为 php IDE。在此先感谢

【问题讨论】：

单击选项卡时，应将 css 类添加到该导航栏项。因此，您可以为该单个项目更改 background-color 之类的 css
@Svenmarim 感谢您的回复。但是我应该在哪里改变？在index.php 或layout.css 内？

标签： php html css navbar

【解决方案1】：

您应该将active 类添加到当前选定的选项卡。在该 css 类中，您只能更改该选项卡的样式。在下面，您将看到如何将带有if 语句的active 类添加到导航栏中的li 对象。然后在您的 style.css 中，您可以更改该类的背景颜色。

<li>
    <a href="<?php echo base_url();?><?php echo $this->uri->segment(1) ?>/home" 
             class="<?php if($this->uri->segment(2)=="home"){echo 'active';}?>">
             Home
    </a>
</li>

【讨论】：

我刚刚在index.php 中的$page = include_once "templates/page.php"; // linking pages 之前添加了这一行echo "$pageData->embeddedCSS";。效果很好！

【解决方案2】：

我想我无意中找到了答案；）

$page = include_once "templates/page.php"; // linking pages之前

添加此echo "$pageData->embeddedCSS";

这完全符合我的要求。 :D

【讨论】：