Question

如果每个链接都是当前页面上的div，我有一个链接列表href，这样我可以在点击一些javascript时更改div显示设置。当前令人讨厌的问题是，当您单击链接时，它会滚动到div位置。我不希望它滚动到div我只需要显示它。

列表中的链接

<li><a href="#victimcenterdiv" class="side-a-li">THE CRIME
                        VICTIMS CENTER</a></li>
                <li><a href="#victimrightsdiv" class="side-a-li">CRIME
                        VICTIM LEGAL RIGHTS</a></li>

div和css

<div id="victimcenterdiv" class="ui-div-interface ui-show">
            <span>12345</span>
        </div>


.ui-div-interface {
    background: none;
    top: 10%;
    position: absolute;
    left: 9%;
    width: 100%;
    height: 100%;
    display: none;
}

.ui-show {
    display: block !important;
}

最后javascript / jquery负责：

<script>
    $(document).ready(function() {
        $('a').not($('#search-reg-options')).click(function() {
            $('.ui-show').removeClass('ui-show')
            var mydiv = $(this).attr('href');
            $(mydiv).addClass('ui-show');
        });

        $('#search-reg-options').click(function() {
            $('.options-shown').removeClass('options-shown')
            var mydiv = $(this).attr('href');
            $(mydiv).addClass('options-shown');
        });
    });
</script>

问题如果有人点击我列表中的链接，如何停止自动滚动？

Answer 1

我认为您正在寻找的是e.preventDefault()方法。这告诉事件停止元素具有的任何默认行为，并继续仅使用.preventDefault()之后的脚本。

$('a').not($('#search-reg-options')).click(function(e) {
    e.preventDefault();
    $('.ui-show').removeClass('ui-show')
    var mydiv = $(this).attr('href');
    $(mydiv).addClass('ui-show');
});

$('#search-reg-options').click(function(e) {
    e.preventDefault();
    $('.options-shown').removeClass('options-shown')
    var mydiv = $(this).attr('href');
    $(mydiv).addClass('options-shown');
});

Answer 2

您的视图自动滚动的原因是因为a div id victimcenterdiv href="#victimcenterdiv" href="#"，因此您拥有属性href

您只需将属性更改为div即可。或者，您也可以在HTML5中完全删除a属性。

但是，您的jquery代码目前取决于href。这意味着您必须添加其他属性才能帮助您的代码区分哪些<a data-display="#victimcenterdiv" class="side-a-li">可见。一种方法是使用data-* attributes.，这样您就可以使用自定义值将自定义属性嵌入到data代码中。

var mydiv = $(this).data('display');
$(mydiv).addClass('ui-show');

要在jquery中获取docker images属性的值，请使用data()方法。

SELECT ac.album_category_id, ac.name, ac2.album_category_id, ac2.name, ac2.description, t2.total
FROM album_category ac
JOIN album_category ac2 ON ac2.parent_album_category_id = ac.album_category_id
JOIN (
    SELECT a.album_category_id cat_id, SUM(result.count_image) total
    FROM album a
    JOIN (
        SELECT IFNULL(a.parent_album_id, a.album_id) p_album_id, COUNT(ai.image_id) count_image
        FROM album_image ai
        JOIN album a ON a.album_id = ai.album_id
        JOIN image i ON i.image_id = ai.image_id
        WHERE i.is_listed = 1
        GROUP BY p_album_id
    ) result ON result.p_album_id = a.album_id
    GROUP BY a.album_category_id
) t2 ON t2.cat_id = ac2.album_category_id
ORDER BY ac.position, ac2.position

自动滚动到Div覆盖

2 个答案: