How to highlight a link from a PHP generated nested list.

Question

I have a PHP script that displays all my topics in nested list and I want to be able to click on a link and when doing so have it be highlighted but i don't know how to go about it with my current code, can someone help me with this?

I'm using PHP, CSS and JQuery

Here is my PHP code to display all my topics in nested lists.

function make_list ($parent = 0, $parent_url = '') {
    global $link;
    echo '<ol>';                
    foreach ($parent as $id => $cat) {
        $url = $parent_url . $cat['url'];
        echo '<li><a href="' . $url . '" title="' . $cat['category'] . ' Category Link">' . $cat['category'] . '</a>';          

        if (isset($link[$id])) {
            make_list($link[$id], $url);
        }               
        echo '</li>';
    }       
    echo '</ol>';
}

$mysqli = mysqli_connect("localhost", "root", "", "sitename");
$dbc = mysqli_query($mysqli,"SELECT * FROM categories ORDER BY parent_id, category ASC");
if (!$dbc) {
    print mysqli_error();
} 

$link = array();
while (list($id, $parent_id, $category, $url) = mysqli_fetch_array($dbc)) {
    $link[$parent_id][$id] =  array('category' => $category, 'url' => $url);
}

make_list($link[0]);

Answer 1

You should look at the CSS pseudo classes for links (see here for example). If you don't want to highlight all links, you cann add a class attribute to the php code and then use it in css to further specialize the pseudo classes, e.g.:

Given the following link created by you phpcode (with class):

<li><a href="http://..." class="highlightedLink">Some Text</a></li>

You can now style that link by using the following css selector:

a.highlightedLink:hover {
    background-color: Gray;
    color: white;
}

This will now highlight the link when you move your mouse over the link. Other pseudo classes let you style the link. Refer to the above reference for the availabel pseudo classes for links.

Answer 2

Add a class to your links. Your generated html should look something like this:

<ol>
  <li><a href="#" class="clickable">Link Text</a></li>
</ol>

You have to use the .live() method to allow the newly added elements to have the 'click' event handler bound to them:

$(document).ready(function(){
    $('a.clickable').live('click',function(){
        $(this).css("background-color","yellow");
    });
});

This will change the background of the <a> to yellow. To change the background of the <li> instead, use $(this).parent().css().

With this method, once the background is set, you cannot turn it off until the page is reloaded or you trigger another event.

If you would like the highlight to be able to toggle on and off, create a CSS class for it (e.g. .highlight)and add the background-color: yellow to the class. Then instead of:

$(this).css("background-color","yellow");

You can use:

$(this).toggleClass('highlight');