如何設置鏈接的背景顏色？

我一直在試圖弄清楚如何設置當前頁面我在不同的背景顏色比其他鏈接，但無濟於事。如何設置鏈接的背景顏色？

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>

我想是設置當前活動鏈接到黑色，而其他四個環節爲灰色。這樣，如果我訪問組合，例如，該鏈接是黑色的，其餘是灰色的。我將如何做到這一點？

來源

2012-06-04 bn60

謝天謝地，沒有涉及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; 
}

請注意，順序很重要！如果我們先把第二個聲明放在第一個聲明中，它將被更一般的鏈接聲明覆蓋。

來源

2012-06-04 23:14:08

嘿謝謝你的答案與步驟的解釋！我已經創建了基於此的CSS，但是，當我在另一個鏈接（可以說，投資組合），背景沒有改變。所有鏈接都保持灰色。 – bn60

@ user1433571您可以在[jsFiddle]（http://jsfiddle.net/）等網站上發佈您的代碼嗎？這樣我們可以看到你的代碼是什麼樣的。 – 2012-06-04 23:42:40

這是你想要的代碼嗎？ http://jsfiddle.net/QHMSa/11/ 順便說一句，任何想法如何設置'家'上面的框也是黑暗的？ – bn60

你有兩種選擇，你可以使用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")

來源

2012-06-04 23:19:21 timaschew

如何設置鏈接的背景顏色？

回答

相關問題