java-下面是两张图片，就是点击编辑改变css样式，怎样实现，还要再dialog上点击，实现删除

问题描述

下面是两张图片，就是点击编辑改变css样式，怎样实现，还要再dialog上点击，实现删除: #

解决方案

你下面的标签用div容器float布局，div relative定位，那个xx按钮absolute定位，默认隐藏。点击编辑的时候新增一个样式给div容器，这个样式控制xx的显示。

大概demo如下，居于jquery的，那个xx的样式你自己调整了

 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<style>
    #tags{zoom:1;overflow:hidden;font-size:13px;margin-top:10px}
    #tags div{float:left;margin-right:10px;position:relative;border:dotted 1px #999}
    #tags div a{position:absolute;right:0px;top:-10px;display:none;background:#000;color:#fff}
    #tags div.edit a{display:block}
</style>
<a href="javascript:void(0)" onclick="chrMode(this)">编辑</a>
<div id="tags">
    <div>标签1<a href="#">x</a></div>
    <div>标签2<a href="#">x</a></div>
    <div>标签3<a href="#">x</a></div>
    <div>标签4<a href="#">x</a></div>
    <div>标签5<a href="#">x</a></div>
</div>
<script>
    function chrMode(a) {
        var toEdit = a.innerHTML == '编辑';
        a.innerHTML = toEdit ? '编辑完成' : '编辑';
        $('#tags div')[toEdit ? 'addClass' : 'removeClass']('edit');
    }
    $(function () {
        $('#tags a').click(function () {
            if (confirm('确认删除')) $(this).parent().remove();
            return false;
        });
    });
</script>

解决方案二：

script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js">

#tags{zoom:1;overflow:hidden;font-size:13px;margin-top:10px}
#tags div{float:left;margin-right:10px;position:relative;border:dotted 1px #999}
#tags div a{position:absolute;right:0px;top:-10px;display:none;background:#000;color:#fff}
#tags div.edit a{display:block}

编辑

标签1x
解决方案三：

JS当中dom实现两张图片的点击轮换