Question

我有一个菜单可以过滤类别并隐藏或显示点击的任何类别。过滤工作正常但由于某种原因我不能停止锚的默认行为。锚点有一个'＃'，每次点击它都会带你到页面顶部，这不是一个好的用户体验。我需要它保持原样，以便在不将用户移动到页面顶部的情况下进行过滤。任何帮助，将不胜感激。谢谢，

这是我的jquery：

$(".portfolio-nav li:first-child").addClass("active");
//Filter through Categories
$(".portfolio-nav ul li a").click(function(e){
    e.preventDefault();
    //Add class active to the nav item
    $(".portfolio-nav li").removeClass("active");
    $(this).parent().addClass("active");
    //Get the filter data
    var filter = $(this).data('filter');
    //set 'All' filter value
    if(filter == '*'){
            filter = 'category';
    }
    //Hide all categories
    $(".categories").children("div").not('.'+filter).css({'width':'0', 'height':'0', 'opacity':'0', 'padding':'0', 'margin':'0'});
    //Fade In filters after categories fade out
    $(".categories").children('.'+filter).css({'width':'48%', 'height':'300px', 'opacity':'1', 'padding':'0', 'margin':'1%'});
});

这是我的标记：

<div class="portfolio-nav block row">
    <ul class="inline center block">
        <li class="pills slow">
            <a href="#" data-filter="*">
                All
            </a>
        </li>
        <li class="pills slow">
            <a href="#" data-filter="websites">
                Websites
            </a>
        </li>
        <li class="pills slow">
            <a href="#" data-filter="ecommerce">
                E-Commerce
            </a>
        </li>
        <li class="pills slow">
            <a href="#" data-filter="apps">
                Apps
            </a>
        </li>
        <li class="pills slow">
            <a href="#" data-filter="tools">
                Tools
            </a>
        </li>
    </ul>
</div>

Answer 1

看来main.js第93行的这段代码导致锚标签跳转到页面顶部：

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++) {
    if(!a[i].onclick && a[i].getAttribute("target") != "_blank") {
        a[i].onclick=function() {
        window.location=this.getAttribute("href");
        return false; 
        }
    }
}

更改点击处理程序，将window.location设置为基本空白的href：

a[i].onclick=function() {
    if(this.getAttribute("href") !== '#') {
        window.location=this.getAttribute("href");
        return false; 
    }
}

你会好起来的！

Answer 2

有一种解决方法，在＃之后输入 #a （href =“＃a”）或任何你想要的字母，它不会单击它到页面顶部。

jQuery preventDefault不会阻止锚的行为

2 个答案: