如何实现“当前页的页码要显示红色背景”?

来源:4-7 编程练习

一起走到

2015-06-08 00:51

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页码的制作</title>
<style>
/*在此定义相关CSS样式*/
.page
{
    height:40px;
}
.page a
{
    display:inline-block;
    border:1px solid #E8E8E8;
    color:black;
    margin:5px;
    padding:5px 10px;
}
.page a:link,.page a:visited
{
   text-decoration:none; 
}

.page a:hover,.page a:active
{
    background-color:red;
}
</style>
</head>

<body>
<!--在此制作页码的基本结构-->
<div class="page">
    <a href="#">首页</a>
    <a href="#">&lt;</a>  
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">...</a>
    <a href="#">&gt;</a>
    <a href="#">末页</a>
</div>


</body>
</html>


写回答 关注

3回答

  • jiankeke
    2016-05-04 09:12:51

    加一个样式:

    .page a:focus{

        background-color:red;

    }


    慕移动507...

    牛逼啊大佬,来自小弟三年后的膜拜

    2019-03-25 11:41:09

    共 1 条回复 >

  • qq_夏_7
    2016-01-22 14:06:32

    <script>

    $(function(){

        $("a").click(function(){

            var $lis=$("a");

            $lis.removeClass("active");

            $(this).addClass("active");

        }).hover(

            function(){

                $(this).addClass("move");

            },

            function(){

                $(this).removeClass("move");

            }

            )

    })

    </script>


  • chavin
    2015-06-08 01:26:09

     <a href="#" class="selected">&lt;</a>  

    <style type="text/css">

    .page .selected{

        background-color:red;

    }

    </style>


企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157042 学习 · 1984 问题

查看课程

相似问题