动态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

回答

相关问题