Question

我为我的页面制作了一个自定义的java脚本+ css分页，我想要突出显示当前的页码，showonlyone（）是一个java脚本函数，它显示隐藏的文本来自用css隐藏的div编号ID。我需要o使分页突出显示工作（将.but css背景颜色更改为＃720000）

我的代码：

<div class="butpos">
Page:

<a id="bt1" href="javascript:showonlyone('post1');"  class="but"><span>1</span></a>                                         
<a id="bt2" href="javascript:showonlyone('post2');"  class="but"><span>2</span></a>                                          
<a id="bt3" href="javascript:showonlyone('post3');"  class="but"><span>3</span> </a>
<a id="bt4" href="javascript:showonlyone('post4');"  class="but"><span>4</span></a>
<a id="bt5" href="javascript:showonlyone('post5');"  class="but"><span>5</span></a>
</div>

我尝试使用Id的纯css方法：

.bt1 a#bt1,
.bt2 a#bt2,
.bt3 a#bt3,
.bt4 a#bt4,
.bt4 a#bt5
{
    background-color: #720000;
}

使用css“curent”选择器的第二种方法：

.but a.current{background-color:#720000;}

Answer 1

加载jQuery：在你的＆lt;之前添加它/体＆GT;

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

HTML

<div class="butpos">
    <a id="bt1" href="#" data-post-id="1" class="but"><span>1</span></a>                                         
    <a id="bt2" href="#" data-post-id="2" class="but"><span>2</span></a>                                         
    <a id="bt3" href="#" data-post-id="3" class="but"><span>3</span></a>                                         
    <a id="bt4" href="#" data-post-id="4" class="but"><span>4</span></a>                                         
    <a id="bt5" href="#" data-post-id="5" class="but"><span>5</span></a>                                         
</div>

JS

function showonlyone(postId) {
    // Your current showonlyone() code
    // (rename 'postId' to the param name of your function
}

$(document).ready(function() {
    $('.but', '.butpos').each(function() {
        $(this).on('click', function() {
            $('.but.current', '.butpos').removeClass('current');
            $(this).addClass('current');

            showonlyone($(this).data('postId'));

            return false;
        });
    });
});

CSS

.but {
    background-color: #0f0;
}

.current {
    background-color: #720000;
}

示例：http://fiddle.jshell.net/DNkap/

如何在分页中突出显示当前页码？

1 个答案: