Question

我有几页，所有页面都有不同的内容，页面都使用相对路径标记在导航中链接。从可用性的角度来看，我想做的是使用jquery .load从其他页面获取内容并将其加载到主索引页面中。所以它不必改变页面。

我想做的是显示：

<a id="show-services" href="our_services.html">OUR SERVICES</a>

对于关闭js的SEO /用户，但实际上，使用（下面）加载内容以实现可用性/用户界面

google.load("jquery", "1.6.2");

google.setOnLoadCallback(function() {
$("#show-services").click(function(){
    $(".content").load("our_service.html .content");
    return false;
    });
});

即使HTML标记显示，.load也会覆盖HTML标记（这样蜘蛛仍会看到网站的结构。

Answer 1

我认为您正在寻找的是e.stopPropagation或e.preventDefault。这将阻止事件冒泡，即单击锚点的操作，因为您正在使用js应用事件。如果用户没有启用js，则代码将不会运行，因此操作将回退到锚定默认行为。

$("#show-services").click(function(e){
    e.preventDefault;
    $(".content").load("our_service.html .content");
    return false;
    });
});

Answer 2

如果您的页面上有多个以这种方式工作的链接，我建议给它们一个特定的类名，以便您可以集体定位它们：

$("nav").on("click", ".asyncLoad", function(event){
  event.preventDefault();
  $(".content").load( event.target.href + ' .content' );
});

这假设链接都在<nav>元素内：

<nav>
  <ul>
    <li><a class="asyncLoad" href="home.html">Home</a></li>
    <li><a class="asyncLoad" href="our_services.html">Our Services</a></li>
    <li><a class="asyncLoad" href="contact_us.html">Contact us</a></li>
  </ul>
</nav>

覆盖<a href=""> when using jquery .load to get content</a>

2 个答案: