jQuery ev.preventDefault 不让 "a"标签触发

Question

使用 preventDefault 停止点击“a”标签以滚动回页面顶部。另一方面，如果我在 jQuery 中编码了 .preventDefault()，我的“a”标签将得不到任何响应。也许你们可以提供帮助？

HTML:

<div class="tab-pane fade" id="Community">
    <br/>
    <ul id="commlinks1" class="nav nav-tabs nav-stacked col-md-12">
        <li>
            <a href="http://www.facsniagara.on.ca/" target="_blank">FACS Niagara External Website</a>
        </li>
        <li>
            <a href="http://www.fccniagara.on.ca/" target="_blank">Family Counselling Centre</a>
        </li>
        <li>
            <a href="/AboriginalServices/Home.cshtml" target="_blank">Aboriginal Services</a>
        </li>
        <li>
            <a href="http://bethlehemhousing.ca/" target="_blank">Bethlehem Place</a>
        </li>
        <li>
            <a href="http://www.camh.net" target="_blank">Centre for Addiction and Mental Health website</a>
        </li>
        <li>
            <a href="http://www.chs.ca/" target="_blank">Canadian Hearing Society</a>
        </li>
        <li>
            <a href="http://www.cfshw.com/" target="_blank">Catholic Family Services of Hamilton</a>
        </li>
        <li>
            <a href="http://www.contactniagara.org/" target="_blank">Contact Niagara</a>
        </li>
        <li>
            <a href="http://www.dsbn.org/" target="_blank">District School Board of Niagara</a>
        </li>
        <li>
            <a href="http://elishahouse.on.ca/" target="_blank">Elisha House</a>
        </li>
    </ul>
    <ul class="nav nav-tabs nav-stacked col-md-12" id="commlinks2">
        <li>
            <a href="http://www.informationniagara.com/" target="_blank">Information Niagara - Helping Through Information</a>
        </li>
        <li>
            <a href="http://www.informationniagara.com/interpreters-niagarahamilton/" target="_blank">Interpreters Niagara-Hamilton Service</a>
        </li>
        <li>
            <a href="http://www.neighboursfriendsandfamilies.ca/" target="_blank">Neighbours Friends and Families</a>
        </li>
        <li>
            <a href="http://www.niagarahealth.on.ca/en/mental-health-addictions" target="_blank">New Port Centre</a>
        </li>
        <li>
            <a href="http://www.niagaracatholic.ca/" target="_blank">Niagara Catholic District School Board</a>
        </li>
        <li>
            <a href="http://www.niagarahealth.on.ca/" target="_blank">Niagara Health System</a>
        </li>
        <li>
            <a href="http://www.niagararegion.ca/" target="_blank">Niagara Region</a>
        </li>
        <li>
            <a href="http://www.breastfeedingniagara.ca/" target="_blank">Niagara Region Breastfeeding Coalition</a>
        </li>
        <li>
            <a href="http://www.nrh.ca/index.html" target="_blank">Niagara Regional Housing</a>
        </li>
        <li>
            <a href="http://www.niagarapolice.ca/en/index.asp" target="_blank">Niagara Regional Police Service</a>
        </li>
    </ul>
    <ul class="nav nav-tabs nav-stacked col-md-12" id="commlinks3">
        <li>
            <a href="http://niagarasuicideprevention.weebly.com/" target="_blank">Niagara Suicide Prevention Coalition</a>
        </li>
        <li>
            <a href="http://nss.ntec-nss.com/page/home" target="_blank">Niagara Support Services</a>
        </li>
        <li>
            <a href="http://www.parentdirectniagara.ca/" target="_blank">Parent Direct Niagara</a>
        </li>
        <li>
            <a href="http://www.sixnations.ca/LandsResources/ContactUs.htm" target="_blank">Six Nations Contact Information</a>
        </li>
        <li>
            <a href="http://womensplacestcatharines.ca/" target="_blank">Women's Place - Services for Abused Women</a>
        </li>
    </ul>

    <div class="pagination">
        <ul class="pager">
            <li id="comm1"><a href="#">1</a></li>
            <li id="comm2"><a href="#">2</a></li>
            <li id="comm3"><a href="#">3</a></li>
        </ul>
    </div>
</div>  

这是 jQuery:

 $(document).ready(function () {
    $("#commlinks1").show();
    $("#commlinks2").hide();
    $("#commlinks3").hide();

   $("#comm1").click(function (ev) {
        ev.preventDefault();
        $("#commlinks1").show();
        $("#commlinks2").hide();
        $("#commlinks3").hide();

    });
    $("#comm2").click(function (ev) {
        ev.preventDefault();
        $("#commlinks2").show();
        $("#commlinks1").hide();
        $("#commlinks3").hide();

    });
    $("#comm3").click(function (ev) {
        ev.preventDefault();
        $("#commlinks3").show();
        $("#commlinks2").hide();
        $("#commlinks1").hide();

    });
});

它正在使用 Bootstrap 分页。如果我去掉 preventDefault，tab 键和点击就可以正常工作，只需滚动回页面顶部即可。

Answer 1

嗯.preventDefault()按照它说的去做，它会阻止所有默认行为。但是对于 <a>标记很容易模拟 native 行为。

$("ul a").click(function(e) {
  window.location.href = $(this).attr("href");
});