我的网页上的 href 有一些问题。当页面加载时,我检查屏幕宽度,如果它对于移动设备来说足够小,我将更改标题中标签的 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 的代码。
下面是我正在更改的标题。
<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> 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> 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> 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是我正在处理的网站
最佳答案
从您的网站上我可以看出,您正在使用 JavaScript 来使用 Ajax(带有华丽的动画)来导航页面。我猜代码正在调用 preventDefault
阻止默认操作的事件,在这种情况下这不是您想要的。
关于javascript - <a> 中的 Href 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31591689/