Question

我已使用此https://jsfiddle.net/u9d1ewsh/在表中添加分页，效果很好。问题是有效页码上出现一个百搭的“-”破折号（请参见下图）。我已经使用开发人员工具检查过相同的内容，它不是字符，它恰好仅适用于活动类。 如何删除它？

$(document).ready(function () {
    $('#tblAH1').after('<div id="pager" style="" ></div>');
    var rowsShown = 5;
    var rowsTotal = $('#tblAH1 tbody tr').length;
    var numPages = rowsTotal / rowsShown;
    for (i = 0; i < numPages; i++) {
        var pageNum = i + 1;
        $('#pager').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
    }
    $('#tblAH1 tbody tr').hide();
    $('#tblAH1 tbody tr').slice(0, rowsShown).show();
    $('#pager a:first').addClass('active');
    $('#pager a').bind('click', function () {

        $('#pager a').removeClass('active');
        $(this).addClass('active');
        var currPage = $(this).attr('rel');
        var startItem = currPage * rowsShown;
        var endItem = startItem + rowsShown;
        $('#tblAH1 tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
        css('display', 'table-row').animate({ opacity: 1 }, 300);
        event.preventDefault();
    });
});


#pager {
            display: inline-block;
            align-items: center;
        }

            #pager a {
                color: black;
                float: left;
                padding: 4px 8px;
                text-decoration: none;
            }

                #pager a.active {
                    background-color: #fb9a55;
                    padding: 4px 8px;
                    color: white;
                }

                #pager a:hover:not(.active) {
                    background-color: #ddd;
                }

Answer 1

添加以下CSS，该行可能由伪选择器生成

.active:before,.active:after {
  content:"";
  display:none;
}

如果您有其他类似引导程序的库，则可能会用该行来设置active类的样式，否则您将覆盖CSS或更改类名

Answer 2

尝试一下：

$('#pager').append('<a href="#" rel="' + i + '">' + pageNum.replace('-','') + '</a> ');

从活动类锚标记中删除一个百搭的“-”破折号

2 个答案: