使用模板导航菜单时突出显示“当前”导航链接

Question

我没有经验的编码，并试图建立一个相当简单的网站与一些HTML和CSS的Dreamweaver。我希望我的导航菜单能够突出显示浏览者正在查看的当前页面，我已经找到了不同的方法来做到这一点。然而，为了使生活随着网站的发展而变得更容易，我将导航菜单设置为模板的不可编辑区域。因此，我发现自己无法对每个页面进行代码更改(例如，为每个链接提供唯一的类或为每个页面提供唯一的主体id )，这似乎允许我突出显示当前页面链接。谢谢!

Answer 1

你可以使用jQuery来检测url中的一个单词：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script> 

    $(document).ready(function($) { 
         if(window.location.href.indexOf("contact") >= 0){ 
              $(".contactLink").addClass("active"); 
         } 
    });

</script> 
<style> 
    .active { color: black; font-weight: bold } 
</style> 


<a href="../contact.html" class="contactLink">contact</a>

这可以将一个类添加到菜单项中，该菜单项包含单词"contactLink“作为类。只要您在所有页面上都有这个js (将其放在一个文件中，而不是在所有页面上硬编码)，它就会工作。如果您将上述代码复制到一个名为test.html的页面中，则链接是正常的。将名称更改为contact.html，它将变为黑色。

为每个菜单项分配一个类，然后将上面的代码复制到您有多少个菜单项。

有更多动态的方法可以做到这一点，但如果你没有数百万个页面，这是一个很好的简单方法。

Answer 2

一种简单的方法是使用Dreamweaver模板属性，它允许您具有可编辑的标记属性：https://helpx.adobe.com/dreamweaver/using/defining-editable-tag-attributes-templates.html

在编辑模板时，如果将光标放在导航项目类上，则可以转到Modify > Templates > Make Attribute Editable。

然后，在基于模板编辑页面时，您将能够添加活动类。