動態CSS類

我的網站有一個簡單的導航使用風格<ul>列表，當前頁面的鏈接突出顯示。目前，我這樣做是通過給予<a>對象像這樣的CSS類：動態CSS類

<ul class="bd-nav"> 
    <li><a href="index.html" class="bd-nav-active">Home</a></li> 
    <li><a href="contact.html">Contact</a></li> 
</ul>

與相應的CSS：

.bd-nav-active { 
    background-color: #563a64; 
}

這完美的作品。但是，我想用PHP構建網站，併爲頭部/導航提供單獨的文件，然後在每隔一頁上只有<?php include ?>文件。

有沒有辦法動態設置導航鏈接的類，具體取決於你在哪個頁面上？這裏最好的方法是什麼？

解決了一些擺弄之後！我簡單地把類屬性爲這樣的變量：（確保逃脫引號！）

<?php 
    $nav_active = "class=\"bd-nav-active\"" 
?>

然後使用該變量在我的導航是這樣的：

<ul class="bd-nav"> 
    <li><a href="index.html" <?php if ($pid == 1) echo $nav_active; ?>>Home</a></li> 
    <li><a href="contact.html" <?php if ($pid == 2) echo $nav_active; ?>>Contact</a></li> 
</ul>

，然後在我只需設置$ pid變量：

<?php $pid = 1; ?>

完美地工作！感謝您的幫助！

@ Arrabidas92有一個很好的方法可以通過獲取頁面URL來自動執行此操作，但我認爲我會這樣做，以更好地控制導航的外觀。

來源

2017-09-08 Besasam

是的，你可以在開始，但一些經驗後，你將需要跳轉到聰明或樹枝圖形庫讓你在開發和網頁設計mutch電源，但這需要知道一點PHP。你也可以跳到像drupal，joomla（舊），workpress這樣的CMS ......這個期貨已經被整合了......關於你CSS的使用：懸停，：主動......問候。 –

得到的URL路徑，並根據它更新您的類 – Znaneswar

嗨Besasam。如果我理解你的擔心，例如，如果用戶在主頁上，則希望突出顯示鏈接主頁。對於聯繫人頁面，您的聯繫人鏈接是否正確？ – Arrabidas92

菜單需要動態生成，每個頁面需要在頁面頂部有一個唯一的ID或其他東西。當您動態生成菜單時，如果生成的菜單項與當前頁面相同，則insert和if子句將回顯活動類。

來源

2017-09-08 08:32:17 heraphim

所以這樣的事情？ ' >Home' – Besasam

就是這樣的。但也許最好有一個數組中的菜單項，並做類似： foreach（$ menu_items as $ item）{ if（$ item == $ page）{$ class =「active」;} echo 「

". $item."

」; } – heraphim

這是一個非常粗略的例子。對不起，我不知道如何將代碼放在這些小評論中。 – heraphim

我現在還沒有在php中編寫過一段時間，但我用它來做這樣的事情，在每個頁面頂部給出一個唯一的文件名。例如在主頁：

<?php 
    $file_name = "index.php"; 
?>

，然後在包含的文件應用的邏輯是這樣的：

<?php 
    if($file_name == "index.php"){ 
    //Your navigation for the home page 
    } 
    else if($file_name == "about.php"){ 
    //Your navigation for the about page 
    } 
?>

來源

2017-09-08 08:37:14 Laiman

好了，所以我會給你一些提示。首先，要在您的網站的網頁上了解您可以在PHP中使用名爲$SERVER的超級全局，並使用此屬性：$_SERVER['REQUEST_URI']。

通過調用此函數，PHP將在您的domain.com之後返回url部分。例如，如果當前網址是domain.com/home，那麼echo將只返回'/ home'。

然後，您可以將您的邏輯有關，凸顯您的鏈接：

if($_SERVER['REQUEST_URI' == '/home') { 
    //Add active class to the link HOME 
}...

來源

2017-09-08 08:41:17 Arrabidas92

你可以試試這一個，但是這是一個jQuery，只是把CDN在您的文件。

$(document).ready(function(){ 

    if(window.location.href === "index.php") { 
     $(".bd-nav").addClass("active-bgRed"); 
    } 
    else if(window.location.href === "about.php") { 
     $(".bd-nav").addClass("active-bgBlue"); 
    } 
    else if(window.location.href === "contact.php") { 
     $(".bd-nav").addClass("active-bgGreen"); 
    } 

}); 

// CSS 
.active-bgRed{ 
    background-color: red; 
} 

.active-bgBlue{ 
    background-color: blue; 
} 

.active-bgGreen{ 
    background-color: green; 
} 

// JQuery CDN 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

來源

2017-09-08 08:52:14

回答

相關問題