How to highlight a link from a PHP generated nested list

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_l开发者_C百科ist($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]);

---

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.

---

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');

---

This should be simple enough, with the following jQuery:

$('li a').click(
    function(){
        $('.active').removeClass('active');
        $(this).addClass('active');
    });

and CSS:

a.active:link,
a.active:visited {
    background-color: #ffa; /* or whatever */
}
a.active:hover {
    text-decoration: underline;
    background-color: #f90; /* or, again, whatever */
}

Demo at: JS Fiddle.

---

Edited to add the following:

If you're trying to assign the 'active' (or whatever other) class on page load, and the links are to other portions of your site, then the following might be of use to you:

$(document).ready(
    function() {
        var topUrl = location.href;

        $('li a').each(
            function() {
                if ($(this).attr('href') == topUrl) {
                    $(this).addClass('active');
                }
            });
    });

Effectively it assigns the url of the current page to the variable 'topUrl', and checks if any of the links in each of the li elements link to the current page, and, if so, assigns the class 'active' to that link. It does require, in its current incarnation, absolute (not relative) paths in the a elements' href attributes though.

---

Edited to refine the script somewhat, to remove the requirement of absolute paths in the hrefs.

$(document).ready(
    function() {
        var topUrl = location.href.split('/').pop();
        $('li a[href$=' + topUrl + ']').addClass('active');
    });

In this incarnation the URL is split on the / character, and the last section of the returned array is stored in the topUrl variable. The jQuery then looks for an a element within an li element to see if any of those elements end in the same portion, so:

www.example.com/index.html

would assign the 'active' class to any a element whose href ends in index.html, which is obviously not without its problems.