HTML链接即使在被“删除”后仍然保留；“移动”；用jQuery？

我有一个网站在这里的快捷方式（“瓷砖”）到不同的网站

现在，我有一个脚本，它允许将“tile”的位置存储到cookie中，这样当用户稍后返回网站时，他们的tile位置就会被保存

下面是脚本：

$(document).ready(function () {
    //we have a hidden field which knows if the tiles are editable (1) or not (2) now just 
    //  let's make sure it is initiated with zero value because the startup state of 
    //  button will be "Edit"
    $("#editable").val('0');
    // loop through the tiles by class
    $('.tile').each(function () {
        // get the positions from cookies 
        var toppos = $.cookie('uiposy' + $(this).attr('id'));
        var leftpos = $.cookie('uiposx' + $(this).attr('id'));
        // apply saved positions
        $(this).css('top', toppos + 'px');
        $(this).css('left', leftpos + 'px');
        // get the sizes from cookies 
        var sizew = $.cookie('uisizew' + $(this).attr('id'));
        var sizeh = $.cookie('uisizeh' + $(this).attr('id'));
        // apply saved sizes
        $(this).css('width', sizew + 'px');
        $(this).css('height', sizeh + 'px');
    });
    // set the tiles as draggable
    $('.tile').
    draggable({
        containment: '#content',
        scroll: false,
        // watch out for drag action
        stop: function (event, ui) {
            // store x/y positions in a cookie when they're dragged
            $.cookie('uiposx' + $(this).attr('id'), ui.position.left, {
                path: '/',
                expires: 7
            });
            $.cookie('uiposy' + $(this).attr('id'), ui.position.top, {
                path: '/',
                expires: 7
            });
        }
    });
    // set the tiles as resizable
    $('.tile').resizable({
        maxHeight: 200,
        maxWidth: 200,
        minHeight: 100,
        minWidth: 100,
        // watch out for resize action
        stop: function (event, ui) {
            // store width/height values in a cookie when they're resized
            $.cookie('uisizew' + $(this).attr('id'), ui.size.width, {
                path: '/',
                expires: 7
            });
            $.cookie('uisizeh' + $(this).attr('id'), ui.size.height, {
                path: '/',
                expires: 7
            });
        }
    });
    //  make resiable and draggable disabled on start
    $(".tile").resizable("option", "disabled", true).removeClass('ui-state-disabled');
    $(".tile").draggable("option", "disabled", true).removeClass('ui-state-disabled');
    // function to run when the editButton is clicked
    $('#editButton').click(function () {
        // store our "state" in boolean form. 
        var state = ($("#editable").val() == 0) ? false : true;
        // state is true, this means we will disable the tiles.
        // make the button text "edit" and change the hidden #editable field value to "0"
        if (state) {
            $("#editable").val('0');
            $(this).val('Edit');
            $('.tile').css('cursor', 'pointer');
        }
        // state is true, this means we will enable the tiles.
        // make the button text "Done" and change the hidden #editable field value to "1"
        else {
            $("#editable").val('1');
            $(this).val('Done');
            $('.tile').css('cursor', 'move');
        }
        // apply the state to tiles. also remove the ui-state-disabled class to make sure they're not faded.
        $(".tile").resizable("option", "disabled", state).removeClass('ui-state-disabled');
        $(".tile").draggable("option", "disabled", state).removeClass('ui-state-disabled');
    });
});

现在，在第一次加载网站而之前没有访问，瓷砖都对齐它的网格5瓷砖宽，2瓷砖高

单击

编辑

按钮后，平铺将变为可拖动和可调整大小

因此，在单击新建

Done

按钮，然后退出浏览器窗口，然后在新的浏览器窗口中返回网站后，位置被保存（有时也会出错），但仍有一些“不可见”的链接，这些链接形成了原始的分幅网格

为什么会发生这种情况。例如，假设在原始编辑中，您将左上角的Google互动程序从原始位置移动到YouTube互动程序下方

然后，当你回来的时候，把鼠标放在浏览器窗口中谷歌瓷砖曾经所在的位置上，你仍然可以点击它，就好像它还在那里一样。您可以很容易地看出这一点，因为我将CSS设置为在不处于编辑模式的情况下将鼠标悬停在链接上时显示一个

指针

光标

---

有没有一种方法可以将链接从其原始位置删除？

它这样做的原因似乎是因为在

li

中有

div

用于拖动。您应该将LI标记作为可拖动对象。这样它也会拖锚

因此，在呈现时，您的html应该与此类似：

<ul>
    <li id="google" class="tile ui-draggable ui-resizable ui-resizable-disabled ui-draggable-disabled" style="left: 116px; top: 119px; cursor: pointer; " aria-disabled="true">
        <a href="http://www.google.com" target="_blank">
        <div>
        <p>Google</p>
            <div class="ui-resizable-handle ui-resizable-e"></div><div class="ui-resizable-handle ui-resizable-s"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div></div>
        </a>
    </li>
</ul>

因此，将ID和类

.tile

放在

li

标记上

---

试一试，看看它是否有效。

你使用firebug和firefox吗？因为正如我在控制台中看到的firebug一样，您有一些li元素，其中包含锚定标签，这就是移动它时剩下的内容！所以他们很可能是在css或者以前的某个地方定义的

看一看:

---

我调整了图像的大小，因为我有宽屏幕。

为什么示例代码中的所有注释都缺少

/

？！很抱歉谢谢帕特里克修好了！！我怀疑那两个！我已经编辑了这个问题并更正了，但是它需要版主的确认！希望这不是你的问题！：P和你们在这里写的关于问题的评论，所以忘了！不，那不是问题，好吧，所以。。什么是去除这个的最有效的方法？也许试着去除整个锚并把onclick放到div上？还有一些导航链接的功能？好主意。不必担心JS的兼容性，因为没有它网站会一塌糊涂。