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

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> 

我想是设置当前活动链接到黑色，而其他四个环节为灰色。这样，如果我访问组合，例如，该链接是黑色的，其余是灰色的。我将如何做到这一点？

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"，在这种情况下我们添加了主页链接。接下来，我们需要为此创建适当的样式。我们的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 & 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
这是更pseude代码，但它的PHP版本

在这种情况下，同样的逻辑也需要window.location.pathname你得到的网址/路径名来检查当前的URL 。分割斜线并提取文件。 然后你可以遍历你的导航元素与jQuery像$("#navigation").find("a")，然后你可以设置一个元素的css风格a.css("background-color", "black")