如何使用 PHP 将类添加到“a href”元素?

Posted

技术标签:

【中文标题】如何使用 PHP 将类添加到“a href”元素?【英文标题】:How to add a class to an "a href" element using PHP? 【发布时间】:2020-10-22 21:32:09 【问题描述】:

我正在尝试使用 php 将“nav-active”类添加到导航元素。这是我的代码,但没有添加类。可能有什么问题?

这是我要更改的部分代码,因此我的常见问题导航项具有“nav-active”类:

<li class="nav-item">
            <a class="nav-link" <?php if ($thisPage=="faq") 
echo "class=\" nav-active\""; ?> href="/faq">FAQ</a>
          </li>

这里是完整的 nav2.php 代码:


<!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand" href="/">Ukryj Się</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="/">O Projekcie</a>
          </li>
            <li class="nav-item">
            <a class="nav-link" <?php if ($thisPage=="faq") 
echo "class=\" nav-active\""; ?> href="/faq">FAQ</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/blog">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/#signup">Kontakt</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="/en/blog">&#127468;&#127463; English</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

编辑:$thisPage 在 faq.php 文件中声明:

<!DOCTYPE html>
<?php $thisPage="faq"; ?>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Wynajmij magiczny dom w lesie z prywatnym dostępem do jeziora, sauną, kominkiem. Pozbądź się ograniczeń, zyskaj niepowtarzalną energię wprost z natury. Uwolnij się od wielkomiejskiego pędu. Pobudź swoją kreatywność.">
  <meta name="author" content="">

【问题讨论】:

$thisPage 在哪里声明? 它在 faq.php 页面的 html pf 中声明:``` ``` 您正在向元素添加 second 类属性。您需要将类 name 添加到已经存在的属性中。 谢谢@CBroe!它解释了为什么它不起作用。 【参考方案1】:

每个php页面的开始:

<?php
$thisPage="faq"; //Pagename
?>

Navar.php:

<li class="nav-item">
<a href="/faq" class="nav-link <?php if($thisPage=='faq') echo 'nav-active"'; ?>">FAQ</a>
</li>
<li class="nav-item">
<a href="/contact" class="nav-link <?php if($thisPage=='contact') echo 'nav-active"'; ?>">CONTACT</a>
</li>

【讨论】:

【参考方案2】:

类属性只能应用一次。所以你可以收集所有的类并把它们像这样:

$classes = ['nav-link'];
if($thisPage == "faq") $classes[] = 'nav-active';

添加任意数量的数组,然后将数组转换为字符串,但用空格分隔。

$classString = join(' ', $classes);

并在您的 HTML 中输出

<a class="<?=$classString?>" href="/faq">FAQ</a>

【讨论】:

谢谢马库斯!现在我读了你的解释,明白我的代码出了什么问题。【参考方案3】:

类属性只能应用一次。最短的方法是三元运算符。

<a class="<?='nav-link'.($thisPage==='faq'?' nav-active':'')?>" href="/faq">FAQ</a>

【讨论】:

以上是关于如何使用 PHP 将类添加到“a href”元素?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用三元运算符将类添加到 ejs 中的 HTML 元素

使用指令将类添加到宿主元素[重复]

如何将类添加到由 appendChild 创建的元素 [重复]

仅当子容器具有内容时,如何将类添加到特定的父元素

使用Angular JS将类添加到元素

如何将类添加到特定的 html 元素,如果它们包含某个值