jQuery won't change class attribute -


i trying create simple pagination control, here code:-

<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <title>untitled document</title> <script type="text/javascript">    $(document).ready(function() {     $(".pagetab").click(function(e) {       $("#pagination > > div").attr("class", "pagetab");       $(this).attr("class", "pageselect");     });   });  </script>  <style>   #pagination{width:100%; height:20px; float:left; margin-left:235px;}   .pagetab{width:14px; height:16px; padding:2px 0px 2px 6px; margin-right:2px; background-color:#fff; border:1px solid #999; color:#0066ff; font-size:11px; cursor:pointer; float:left;}   .pagetab:hover{width:14px; height:16px; padding:2px 0px 2px 6px; margin-right:2px; background-color:#ccc; border:1px solid #999; color:#0066ff; font-size:11px; cursor:pointer;float:left;}   .pageselect{width:14px; height:16px; padding:2px 0px 2px 6px; margin-right:2px; background-color:#ccc; border:1px solid #999; color:#0066ff; font-size:11px; cursor:pointer;float:left;} </style> </head>  <body>      <div id="pagination">          <a href="#gpage1" class="blue">         <div id="g1" class="pageselect">1         </div>         </a>          <a href="#gpage2" class="blue">         <div id="g2" class="pagetab">2         </div>         </a>          <a href="#gpage3" class="blue">         <div id="g3" class="pagetab">3         </div>         </a>          <a href="#gpage4" class="blue">         <div id="g4" class="pagetab">4         </div>         </a>          <a href="#gpage5" class="blue">         <div id="g5" class="pagetab">5         </div>         </a>          <a href="#gpage6" class="blue">         <div id="g6" class="pagetab">6         </div>         </a>      </div>   </body> 

if click on numbers 2-6, class changed , correct colour scheme applied. when click on number 1 class remains same.

it seems have whichever div starts life pageselect class. if change number 2 pageselect in code , load page, numbers 1 , 3-6 fine, number 2's class not change.

any ideas?

change click selector to:

 $(".pagetab, .pageselect").click(function(e) { ... } 

Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -