I'm trying to add more complex CSS to jquery paginate links I intent to use, I've tried adding different classes to the javascript yet nothing works.

The whole code is;

Code:
<style>
        
a   {
float: left;
  padding: 0 14px;
  line-height: 34px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-left-width: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>

 
<input type='hidden' id='current_page' />  
<input type='hidden' id='show_per_page' />  
   
<div id='content'>  
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>  
    <li>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</li>  
    <li>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</li>  
    <li>Pellentesque ac sem ac sem tincidunt euismod.</li>  
    <li>Duis hendrerit purus vitae nibh tincidunt bibendum.</li>  
    <li>Nullam in nisi sit amet velit placerat laoreet.</li>  
    <li>Vestibulum posuere ligula non dolor semper vel facilisis orci ultrices.</li>  
    <li>Donec tincidunt lorem et dolor fringilla ut bibendum lacus fringilla.</li>  
    <li>In non eros eu lacus vestibulum sodales.</li>  
    <li>Duis ultrices metus sit amet sem adipiscing sit amet blandit orci convallis.</li>  
    <li>Proin ullamcorper est vitae lorem mollis bibendum.</li>  
    <li>Maecenas congue fringilla enim, tristique laoreet tortor adipiscing eget.</li>  
    <li>Duis imperdiet metus et lorem venenatis nec porta libero porttitor.</li>  
    <li>Maecenas lacinia lectus ac nulla commodo lacinia.</li>  
    <li>Maecenas quis massa nisl, sed aliquet tortor.</li>  
    <li>Quisque porttitor tellus ut ligula mattis luctus.</li>  
    <li>In at mi dolor, at consectetur risus.</li>  
    <li>Etiam id erat ut lorem fringilla dictum.</li>  
    <li>Curabitur sagittis dolor ac nisi interdum sed posuere tellus commodo.</li>  
    <li>Pellentesque quis magna vitae quam malesuada aliquet.</li>  
</div>  
  

<div id='page_navigation'></div>  
<script type="text/javascript">
$(document).ready(function(){  
  
    var show_per_page = 2;  
    var number_of_items = $('#content').children().size();  
    var number_of_pages = Math.ceil(number_of_items/show_per_page);  
  
    $('#current_page').val(0);  
    $('#show_per_page').val(show_per_page);  
    
    var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';  
    var current_link = 0;  
    while(number_of_pages > current_link){  
        navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';  
        current_link++;  
    }  
    navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';  
  
    $('#page_navigation').html(navigation_html);  
  
    $('#page_navigation .page_link:first').addClass('active_page');  
  
    $('#content').children().css('display', 'none');  
  
    $('#content').children().slice(0, show_per_page).css('display', 'block');  
  
});  
  
function previous(){  
  
    new_page = parseInt($('#current_page').val()) - 1;  
    if($('.active_page').prev('.page_link').length==true){  
        go_to_page(new_page);  
    }  
  
}  
  
function next(){  
    new_page = parseInt($('#current_page').val()) + 1;  
    if($('.active_page').next('.page_link').length==true){  
        go_to_page(new_page);  
    }  
  
}  
function go_to_page(page_num){  
    var show_per_page = parseInt($('#show_per_page').val());  
  
    start_from = page_num * show_per_page;  
  
    end_on = start_from + show_per_page;  
  
    $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');  
  
       $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');  
  
    $('#current_page').val(page_num);  
}  
</script>
Ideally I'd like to use this along with the foundation framework pagination its code is

Code:
CSS

/* Pagination ---------------------- */
ul.pagination { display: block; height: 24px; margin-left: -5px; }
ul.pagination li { float: left; display: block; height: 24px; color: #999; font-size: 14px; margin-left: 5px; }
ul.pagination li a { display: block; padding: 1px 7px 1px; color: #555; }
ul.pagination li:hover a, ul.pagination li a:focus { background: #e6e6e6; }
ul.pagination li.unavailable a { cursor: default; color: #999; }
ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus { background: transparent; }
ul.pagination li.current a { background: #2ba6cb; color: white; font-weight: bold; cursor: default; }
ul.pagination li.current a:hover, ul.pagination li.current a:focus { background: #2ba6cb; }


HTML
<ul class="pagination">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>
I'm cluess in going about it - is it even possible?