Question

我正在尝试创建一个简单的分页控件，这里是代码： -

<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的类不会更改。

有什么想法吗？

Answer 1

尝试更改：

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

到：

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

Answer 2

将您的点击选择器更改为：

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

jQuery不会改变类属性

2 个答案: