How do I "highlight" (turn to a different color, make bold, whatever..) a link that has been clicked on?
Example is here: http://www.celebrything.com/ Trying to get the Today, Week, and Month links in the right sidebar to turn a different color once clicked.
Here's the code I'm using to show the results in the right sidebar:
<div id="sidebar">
<div class="post">
<h2>
<font color="#333333">Top 50 Celebrities</font>
<br>
<br>
<font color="#333333"><a href="index.php?table=today">Today</a></font>
<font color="#333333"><a href="index.php?table=week">Week</a></font>
<font color="#333333"><a href="index.php?table=month">Month</a></font>
</font>
<br>
<br>
<?php
function showTable ($table){
if (!in_array($table, array('today', 'week', 'month'))) {
return false;
}
global $wpdb;
$result = $wpdb->get_results('SELECT name, count FROM wp_celebcount_' . $table);
foreach($result as $row) {
echo '<a href="http://www.celebrything.com/?s=' .
urlencode($row->name) . '&search=Search">' . $row->name .
'</a> - ' . $row->count . ' Posts<br/>';
}
}
if (!empty($_GET['table'])) {
showTable($_GET['table']);
} else { showTable('today'); }
?>
</h2>
</div>
</div>
<div class="clear"></div>
CSS can do this.
If a link has been visited at any point:
<style type="text/css">
a:visited { color: red; }
</style>
If the link has focus:
a:focus { color: red; }
Note: IE7 and lower don't support :focus
. See CSS contents and browser compatibility and :focus
.
If your asking howto make the current page active here is how you can do it:
<font color="#333333"><a class="<?php echo currentPage('today') ?>" href="index.php?table=today">Today</a></font>
<font color="#333333"><a class="<?php echo currentPage('week') ?>" href="index.php?table=week">Week</a></font>
<font color="#333333"><a class="<?php echo currentPage('month') ?>"href="index.php?table=month">Month</a></font>
function currentPage($isTableSet)
{
if($_GET['table'] == $isTableSet)
return 'selected'
else
return '';
}
And you will need to add the .selected class in your css and style it to whatever you want, maybe something like this:
<style type="text/css">
.selected {
font-weight: bold;
}
</style>