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

您可以做的一件事是阅读网址，并在此基础上将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");
     })
});

Answer 2

我认为这种方式更有用：

$(function(){
    var pgUrl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
    $("#nav ul li a[href='"+ pgUrl +"']").addClass('active');
});

Answer 3

使用D3

<script>
var pgUrl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
d3.select("#navbar").selectAll("a").each(function(d){
if(d.tecode here == pgUrl )
d.attr("class","active");
 });
</script>

使用动态选项卡创建菜单文件

3 个答案: