PHP & CSS - панель навигации не выделяет текущую вкладку - PullRequest
Новая
       7

PHP & CSS - панель навигации не выделяет текущую вкладку

0 голосов
/ 19 ноября 2018

Я пытаюсь отобразить веб-страницу со следующей навигационной панелью в виде вкладок: EXample webpage with selected tab style

Но я получаю этот результат, даже если я нажимаю на ссылки несколько раз: This coming up

(прошу игнорировать тексты, это примеры из справочника) Ниже мой код: 

<?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. Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 19 ноября 2018

Я думаю, что нашел свой ответ случайно;)

до $page = include_once "templates/page.php"; // linking pages

добавить это echo "$pageData->embeddedCSS";

, это работает именно так, как я хотел.: D

0 голосов
/ 19 ноября 2018

Вы должны добавить класс 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>
...