jquery - Unobtrusive JavaScript on a series of buttons -

i'm looking unobtrusive javascript, suggesting javascript should separated html.

in page, use jquery 1.9.1 jquery migrate plugin 1.1.1 . use <li> simulate menu page. each <li>, menu item. assigned javascript follow:

    <ul>         <li onclick="showq('0001')">q 1</li>         <li onclick="showq('0002')">q 2</li>         <li onclick="showq('0003')">q 3</li>         <li onclick="showq('0004')">q 4</li>     </ul> 

1st question: how convert respective unobtrusive javascript ?

the javascript function follow:

function showq(id) {   $('#' + id).show(); } 

2nd question: ( it's jquery question ) how can function reference original <li>, e.g. add class via .addclass('some_css_class'); ?

change id of each <li> include id want pass showq function. in document ready handler assign click hander <li> elements , call showq function there, passing in id extracted clicked <li>. in click handler refer clicked <li> using $(this) in order add class it

html

<ul>     <li id="i0001">q 1</li>     <li id="i0002">q 2</li>     <li id="i0003">q 3</li>     <li id="i0004">q 4</li> </ul> 

javascript

function showq(id) {   $('#' + id).show(); }  $(document).ready(function() {     $("ul li").click(function() {         var id = $(this).attr("id").substring(1);         showq(id);          $(this).addclass("some_css_clas");     }); }); 

example