2013-04-18 91 views
2

我試圖創建一個簡單的分頁控制,這裏是代碼: -jQuery將不會改變類屬性

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

如果你點擊數字2-6,類變化和正確的應用顏色方案。但是當你點擊數字1時,班級保持不變。

這似乎與DIV以pageSelect類開始生活有關。如果您在代碼中將號碼2更改爲pageSelect並加載該頁面,則數字1和3-6都可以,但是號碼2的類別不會更改。

任何想法?

回答

1

您點擊選擇更改爲:

$(".pageTab, .pageSelect").click(function(e) { ... } 
+0

當然是啊,是啊!當你知道答案時很容易,謝謝你。 –

2

嘗試改變:

$(this).attr("class", "pageSelect"); 

到:

$(this).addClass('pageSelect').removeClass('pageTab');