Question

当我点击时，我试图显示具有以下标签式导航栏的网页：

但是，即使我多次单击链接，也得到了此结果：

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

<?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。预先感谢

Answer 1

您应该将active类添加到当前选定的标签。在该CSS类中，您只能更改该选项卡的样式。在下面，您将看到如何将带有active语句的if类添加到导航栏中的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>

Answer 2

我想我是偶然找到答案的；）

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

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

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

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

2 个答案: