<a> 中的 Href 无法正常工作

Question

我的网页上的 href 有一些问题。当页面加载时，我检查屏幕宽度，如果它对于移动设备来说足够小，我将更改 header 中标签的 href。这是 javascript 的样子。

$(function () {
    var hrefs = [$('#BTN_Services').attr('href'), 'http://jdcservices.ca' + '#mobileServices'];

    $(window).on('resize', function () {
    $('#BTN_Services').attr('href', function () {
        return hrefs[$(window).width() > 1240 ? 0 : 1];
    });
    }).trigger('resize');
}

这是将 href 从 /Services.aspx 页面更改为 #mobileServices div 的代码。

下面是我正在更改的header。

<a href="#" id="logo"></a>

<nav>

    <a href="#" id="menu-icon"></a>

    <ul>

        <li><a id="BTN_Home" href="/Index.aspx" class="current">HOME</a></li>
        <li><a href="/Safety.aspx">SAFETY</a></li>
        <li><a id="BTN_Services" href="/Services.aspx">SERVICES</a></li>
        <li><a href="/Careers.aspx">CAREERS</a></li>
        <li><a href="/Contact.aspx">CONTACT</a></li>

    </ul>

</nav>

</header>

<div id="mobileServices"  style="width: 100%; padding-bottom: 5%;">
        <div class="row" style="padding-bottom: 5%;">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h1 style="text-align: center; font-weight: bold;">Services</h1>
                <hr width="75%" />
                <p>
                    Based in Hinton, AB and servicing Hinton, Edson, Grande Cache, and Fox Creek area, JD&C Services has grown and adapted to meet the needs of its clients with a team of highly skilled individuals.  We strive to perform our jobs in an efficient, safe, and environmentally responsible manner exceeding the expectations of our customers.
                </p>
            </div>
        </div>
        <div class="row" style="text-align: center; height:100%; overflow: hidden;">
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 sameHeight" style="background-color: #421C4C; color:white;  vertical-align: middle; padding-top: 4%; padding-bottom: 2%;">
                <h2><i class="fa fa-truck"></i>&nbsp;&nbsp; Tank Truck Services</h2>
                <hr width="75%"/>
                <p>
                    - Sour sealed tank truck services
                    <br />
                    - Body jobs
                    <br />
                    - Tri-Tri's
                    <br />
                    - Super B's
                    <br />
                    * All trucks are equipped with GPS tracking hardware.
                </p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 sameHeight" style="background-color: white; color:black;  vertical-align: middle; padding-top: 2%; padding-bottom: 2%;">
                <h2><i class="fa fa-database"></i>&nbsp;&nbsp;Product Sales</h2>
                <hr width="75%"/>
                <p>
                    - KCL sales
                    <br />
                    - Clay stabalizer
                    <br />
                    - Hot and cold water sales
                    <br />
                    - Kill fluid
                </p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 sameHeight" style="background-color: #421C4C; color:white; vertical-align: middle; padding-top: 2%; padding-bottom: 4%;">
                <h2><i class="fa fa-road"></i>&nbsp;&nbsp;Portable Filter Units</h2>
                <hr width="75%"/>
                <p>
                    Portable filter units are available for delivery and rental. Various micron filters are available.
                </p>
            </div>
        </div>
        <br />
    </div>

因此，根据我在 google chrome 内部的检查，href 正在按预期更改，但 href 仍无法将我带到正确的 div。我不确定我在做什么，也许是在我的 CSS?

中阻止了它

Here 是我正在处理的站点

Answer 1

我从您的网站可以看出，您正在使用 JavaScript 来导航使用 Ajax 的页面（带有华丽的动画）。我猜代码正在调用 preventDefault 阻止默认操作的事件，在这种情况下这不是你想要的。

Answer 2

我不知道为什么 link 不跳转到锚点位置，我尝试删除所有点击处理程序但它没有用，但你可以通过这种方式修复：

当您的页面是移动版时添加：

$('#BTN_Services').click(function({window.location.href="#mobileServices";});

并以这种方式删除：

$('#BTN_Services').off('click');

<a> 中的 Href 无法正常工作

Href in <a> not working properly

javascript

css

asp.net

href