Question

我正在尝试修复现有网站的代码。我们使用的导航哈希与内容ID相关联。所有内容都被隐藏，点击与锚标记中的nav哈希相匹配的id将显示带有ID的相应内容。

我遇到的问题是，一个特定的导航部分有一个子部分，我需要一个链接链接到PDF，同时保持父页面内容。目前，它既可以维护页面内容，也可以链接到PDF。对你们如何解决这种情况感到好奇。

以下是我正在讨论的部分：

HTML

<li><a href="#floor-plan">Floor Plans</a>
   <ul class="sub-nav">
     <li><a href="#floor-plan">3D Map</a></li>
     <li><a href="../link/to/pdf">Detailed Floorplan</a></li>
   </ul>
</li>

JS

$(".main--nav").each(function(){
    $('.main--nav li a').on('click', function(){
     // e.preventDefault();
     var $id = $(this).attr('href');
     $('.exhib-content').hide();
     $($id).show();
    });
});

注意：我注释掉'preventDefault（）;'用于测试，因为它不会让链接实际发送到PDF，或任何相关的事情。

Answer 1

使用attribute starts with selector定位仅以#开头的href，也不需要每个循环

$('.main--nav li a[href^="#"]').on('click', function () {
    e.preventDefault();
    var $id = $(this).attr('href');
    $('.exhib-content').hide();
    $($id).show();
});

使用jQuery维护链接

1 个答案: