2

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

<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班级生活有关。如果pageSelect将代码中的数字 2 更改为并加载页面，则数字 1 和 3-6 都可以，但数字 2 的类不会改变。

有任何想法吗？

4

2 回答 2

2

尝试改变：

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

至：

$(this).addClass('pageSelect').removeClass('pageTab');
于 2013-04-18T16:14:02.687 回答
1

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

 $(".pageTab, .pageSelect").click(function(e) { ... }
于 2013-04-18T16:10:19.170 回答