Question

我一直试图弄清楚如何将当前页面设置为与其他链接不同的背景颜色，但无济于事。

HTML

<div id="navigation">
    <ul>
        <li><a href="<?php echo base_url() ?>index.php/home">Home</a></li>
        <li><a href="<?php echo base_url() ?>index.php/portfolio">Portfolio</a></li>
        <li><a href="<?php echo base_url() ?>index.php/about">About</a></li>
        <li><a href="<?php echo base_url() ?>index.php/gallery">Gallery</a></li>
        <li><a href="<?php echo base_url() ?>index.php/blog">Blog</a></li>
    </ul>
</div>

我想要的是将当前活动链接设置为黑色，将其他四个链接设置为灰色。这样，如果我访问 Portfolio ，例如，该链接为黑色，其余为灰色。我该怎么做？

Answer 1

谢天谢地，没有涉及Javascript。 HTML和CSS可以很好地完成这项任务。首先，让我们创建您的HTML。你显然知道你在哪个页面，所以我们要在当前页面的链接中添加一个类。因此，例如，如果我们在/index.php/home，我们的标记可能看起来与此类似。

<div id="navigation">
    <ul>
        <li><a class="current" href="<?php echo base_url() ?>index.php/home">Home</a></li>
        <li><a href="<?php echo base_url() ?>index.php/portfolio">Portfolio</a></li>
        <li><a href="<?php echo base_url() ?>index.php/about">About</a></li>
        <li><a href="<?php echo base_url() ?>index.php/gallery">Gallery</a></li>
        <li><a href="<?php echo base_url() ?>index.php/blog">Blog</a></li>
    </ul>
</div>

现在，在我们为当前链接着色之前，我们将为其余链接着色。我们可以通过CSS选择其余的链接。

#navigation a {
}

以下CSS将选择<a>元素的所有navigation个元素。所以现在我们需要设置它的背景颜色。用于设置背景颜色的CSS属性为background-color: xxx。其中xxx是十六进制代码，rgb值或颜色名称。因此，我们将执行以下操作以使所有链接变为灰色。

#navigation a {
    background-color: #333; /* or whatever grey you want. */
}

这会将每个链接设置为灰色。现在，我们需要将当前链接设置为黑色。

如果您注意到，我们在当前链接中添加了class="current"，在这种情况下为 home 链接。接下来，我们需要为此创建适当的样式。我们的CSS声明看起来与此类似。

#navigation .current {
}

以上声明适用于类current的所有元素，它是元素navigation的子元素。所以现在我们设置背景颜色。

#navigation .current {
    background-color: #000;
}

所以，我们的最终CSS看起来就是这样。

#navigation a {
    background-color: #333;
}

#navigation .current {
    background-color: #000;
}

请注意顺序非常重要！如果我们先将第二个声明放在第一位，那么它将被更一般的链接声明覆盖。

Answer 2

你有两个选择，你可以使用PHP和CSS，这是更好的，因为这是客户端独立的。第二种选择是使用Javascript和CSS

PHP＆amp; CSS
我更喜欢这种方式！如果当前页面等于每个菜单链接，您需要检查每个站点。以下是我的解决方案的一些片段。它适用于我的网站。我不知道它是否按照您的方式进行链接：index.php/home。认为你必须适应它。因为我使用像home.php和blog.php这样的真实文件

这是menu.php，我把它包含在每个网站中：

<div id="menu"> <div class="innertube"> <ul> <? markIfCurrent("Willkommen", "willkommen"); markIfCurrent("Salzgrotte", "salzgrotte-am-fehn"); markIfCurrent("Heilwirkung", "heilwirkung-des-salzes"); markIfCurrent("Farbtherapie", "farblichttherapie"); markIfCurrent("Salzshop", "salzshop"); markIfCurrent("Erfahrungs-<br/>berichte", "erfahrungsberichte"); markIfCurrent("Fragen und Antworten", "fragen-und-antworten"); markIfCurrent("Preise", "preise"); markIfCurrent("Galerie", "galerie"); markIfCurrent("Presse", "presse"); markIfCurrent("Praxis", "praxis"); markIfCurrent("Anfahrt", "anfahrt"); ?> </ul> </div> </div>

现在php功能：

/* filter selected menu items */ function markIfCurrent ($name, $link) { $should_mark = isCurrent($link); if ($should_mark) { $first = strtoupper(substr($name, 0, 1)); $rest = substr($name, 1); echo "<li><span class='current'>".$name."</span></li>\n"; } else { echo "<li><a class='lower' href='".$link."'>".$name."</a></li>\n"; } } /* check if $pageis current page */ function isCurrent ($page) { /* reverse mapping */ if ($page == "willkommen") { $page = "index"; } $isCurrent = $page.".php" == getCurrentPage(); return $isCurrent; } function getCurrentPage() { $path = $_SERVER['PHP_SELF']; $a = explode("/", $path); $site_name = $a[sizeof($a)-1]; return $site_name; }

至少CSS：

li span.current a { background-color: black; /* or #000000 */ } li span a { background-color: gray; /* or #cccccc*/ }

JavaScript＆amp; CSS
这是更多pseude代码，但它与PHP版本的逻辑相同

在这种情况下，您还需要检查当前网址使用window.location.pathname，您将获得网址/路径名。拆分斜杠并解压缩文件。然后，您可以使用jQuery（例如$("#navigation").find("a")）遍历导航元素，然后可以为元素a.css("background-color", "black")设置css样式

如何设置链接的背景颜色？

2 个答案: