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的類別不會更改。
任何想法?
當然是啊,是啊!當你知道答案時很容易,謝謝你。 –