jquery:点击之后变颜色，点击另一个，另一各变颜色，当前的恢复颜色

jquery:点击之后变颜色，点击另一个，另一各变颜色，当前的恢复颜色

 <style type="text/css">
        body {
           font-family: "微软雅黑";
        }

        .list .page{
            float: left;
            padding: 5px 10px;
            border: 1px solid #ddd;
            margin-right: 5px;
            list-style: none;
        }

        .current {
            color: #fff;
            background: #337ab7;
        }

 </style>
 <div id="paginator" class="paginator">
        <ul class="list">
            <li class="page">首页</li>
            <li class="page">上一页</li>
            <li class="page">1</li>
            <li class="page">2</li>
            <li class="page">3</li>
            <li class="page">4</li>
            <li class="page">5</li>
            <li class="page">6</li>
            <li class="page">下一页</li>
            <li class="page">末页</li>
        </ul>
 </div>
 <script type="text/javascript">
        $('.list').on('click','.page',function(){
            $(this).addClass("current").siblings().removeClass("current");
        });
 </script>

一句话就可以实现，但是有一点bug，加上字体颜色后，会发现之后.current中的color不起作用了

.list .page{
            float: left;
            padding: 5px 10px;
            border: 1px solid #ddd;
            margin-right: 5px;
            list-style: none;
            color: #337ab7;}

大家有好的解决方法可以提出来