2 eed7613868 eed7613868 于 2015.07.22 14:56 提问

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

#图片说明图片说明

3个回答

showbo
showbo   Ds   Rxr 2015.07.22 16:09
已采纳

你下面的标签用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>
eed7613868
eed7613868 这个结果还要保存在数据库,并不是在页面删除就行了,不过还是谢谢你
2 年多之前 回复
sina_2831808769
sina_2831808769   Rxr 2015.07.25 13:56

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
标签2x
标签3x
标签4x
标签5x
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; }); });
CSDNXIAON
CSDNXIAON   2015.07.22 15:00

JS当中dom实现两张图片的点击轮换
----------------------同志你好,我是CSDN问答机器人小N,奉组织之命为你提供参考答案,编程尚未成功,同志仍需努力!

eed7613868
eed7613868 我正在找西瓜刀,你别走
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片