Question

我对编码缺乏经验，并试图在Dreamweaver中使用一些HTML和CSS构建一个非常简单的网站。我希望我的导航菜单突出显示观看者正在查看的当前页面，我发现了不同的方法。但是，为了让网站不断发展，我将导航菜单设置为模板的不可编辑区域。因此，我发现自己无法对每个页面进行编码更改（例如，为每个链接提供一个唯一的类或每个页面的唯一正文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>

这可以在菜单项中添加一个类，其中包含＆＃34; contactLink＆＃34;作为一个班级。只要你在所有页面上都有这个js（把它放在一个文件中而不是在所有页面上进行硬编码）它就可以工作了。如果您将上述代码复制到名为test.html的页面中，则链接正常。将名称更改为contact.html，它变黑了..

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

有更多动态的方式，但如果你没有数百万页，这是一个很好的简单方法。

Answer 2

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

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

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

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

2 个答案: