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
Post a Comment