使用模板导航菜单时突出显示"current"导航链接

Question

我在编码方面缺乏经验，并试图在 Dreamweaver 中使用一些 HTML 和 CSS 构建一个非常简单的网站。我希望我的导航菜单突出显示查看者正在查看的当前页面，并且我找到了不同的方法来执行此操作。但是，为了使网站的发展更轻松，我将导航菜单设置为模板的不可编辑区域。因此，我发现自己无法对每个页面进行编码更改（例如，为每个链接提供唯一的类或为每个页面提供唯一的正文 ID），这似乎允许我突出显示当前页面链接。谢谢！

Answer 1

执行此操作

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

编辑模板时，如果将光标放在导航项类上，则可以转到修改>模板>使属性可编辑。

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

Answer 2

你可以使用 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则链接正常。 将名称更改为联系人.html它变为黑色。

为每个菜单项指定一个类，然后复制上面的代码，无论您拥有多少项。

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