1

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

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，例如，该链接是黑色的，其余的都是灰色的。我该怎么做？

4

2 回答 2

0

值得庆幸的是，没有涉及 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"到当前链接，在这种情况下为主页链接。接下来我们需要为此创建适当的样式。我们的 CSS 声明将与此类似。

#navigation .current {
}

上面的声明适用于类current是 element 子级的所有元素navigation。所以现在我们像这样设置背景颜色。

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

所以，我们最终的 CSS 应该是这样的。

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

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

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

于 2012-06-04T23:14:08.477 回答
0

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

PHP & 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 & CSS
这是更多的伪代码，但它与 PHP 版本的逻辑相同

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

于 2012-06-04T23:19:21.913 回答