您的位置:首页 > Web前端 > JQuery

jquery 实现背景图片循环切换,显示隐藏div

2014-09-18 17:24 971 查看
jquery实现图片背景循环切换,显示隐藏一个div。

<script type="text/javascript">

$(function(){
$("#table4").hide();
$(".o_record p span").toggle(function(){
$(this).addClass("o_span");
$("#table4").show();
},function(){
$(this).removeClass("o_span");
$("#table4").hide();
})
});
</script>

<stype type="text/css">

.o_layout .o_record p .o_span{ float:right; display:inline; width:60px; background:url(../images/20140918010340704_easyicon_net_16.png) no-repeat right;cursor:pointer;}

.o_up{ float:right; display:inline; width:60px;background:url(../images/20140918010354231_easyicon_net_16.png) no-repeat right; cursor:pointer;}

.o_layout .o_record .table4{margin-top:10px;}

</style>

 <div class="o_record">

    <p><i class="r_icon"></i>操作历史记录<span class="o_up">|  展开</span></p>

    <div class="table4" id="table4">

      <table>

        <tbody>

          <tr>

            <th class="col_width2">操作者</th>

            <th class="col_width2">操作时间</th>

            <th class="col_width2">操作状态</th>

            <th>备注</th>

          </tr>

        </tbody>

        <tbody> <tr>

            <th class="col_width2"></th>

            <th class="col_width2"></th>

            <th class="col_width2"></th>

            <th></th>

          </tr></tbody>

      </table>

    </div>

  </div>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery