javascript - 创建一个带有动态选项卡的菜单文件

Question

我试图将我网站的菜单只放在一个文件中，并将其包含在其余的 .html 页面中。每次制作新页面时，我都会复制并粘贴菜单，因为我希望为每个不同的页面突出显示事件的选项卡。这就是为什么我不能只为每个页面制作一个文件的原因，而且我不知道如何才能在每个不同的页面中设置事件选项卡。

这是我在每个页面中复制粘贴的代码。

<!-- BEGIN MENU -->
    <section id="menu-area">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <div id="navbar" class="navbar-collapse collapse">
                    <ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
                        <li><a href="index.php">Home</a></li>
                        <li><a href="404.php">Downloads</a></li>
                        <li><a href="404.php">Media</a></li>
                        <li class="dropdown"><a href="#" class="dropdown-toggle"
                            data-toggle="dropdown">Research <span
                                class="fa fa-angle-down"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="404.php">D3</a></li>
                            </ul></li>
                        <li><a href="team.php">Team</a></li>
                        <li class="active"><a href="contact.php">Contact</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
                <a href="#" id="search-icon"> <i class="fa fa-search"> </i>
                </a>
            </div>
        </nav>
    </section>
    <!-- END MENU -->

在这种情况下，联系人选项卡突出显示:

<li class="active"><a href="contact.php">Contact</a></li>

如果主页是事件的，那么我需要这样做:

<li class="active"><a href="index.php">Home</a></li>

我希望我说清楚了，我的英语很糟糕。我很欣赏任何想法，我真的是网络开发的新手。

Answer 1

您可以做的一件事是读取 URL 并在此基础上将 active class 添加到菜单中的该链接。

$(function() {
     var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
     $("#nav ul li a").each(function(){
          if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
          $(this).addClass("active");
     })
});