Incorporating CSS into JavaScript/Ajax functionality

Question

mypage() is a lengthy function that provides information such as page numbers, total number of pages, and the next page in a pagination system.

selectPage() is a JavaScript/Ajax script used to send the current page number to the server.

While my CSS file successfully styles the page number on hover, it fails to apply the correct color for the current page number.

Is there a specific syntax I should use in the CSS file to style the 'current' page number?

function mypage($total, $start) {
;
;
$mypage.= "<li><a href='javascript:selectPage(".$counter.")'>$counter</a></li>";
;
;
return $mypage;
}

The CSS file:

ul.mypage li a:hover, ul.mypage li a.current
{
   color:#AAA;
}

Answer 1

Answer №1

Sven's feedback suggests that the link must have a class called current.

function displayPage($total, $start) {  
  return "<li><a class='current' href='javascript:showSelectedPage(".$counter.")'>$counter</a></li>";
}

If you wish to apply the "current" class when an item is clicked, additional steps are needed:

In the event handler: this.className='current', however, you must also remember the previously selected item and remove its "current" class

Answer 2

Sven's feedback suggests that the link must have a class called current.

function displayPage($total, $start) {  
  return "<li><a class='current' href='javascript:showSelectedPage(".$counter.")'>$counter</a></li>";
}

If you wish to apply the "current" class when an item is clicked, additional steps are needed:

In the event handler: this.className='current', however, you must also remember the previously selected item and remove its "current" class