从 .html 移动到 .aspx 时，引导导航随机突出显示（活动？）答案

【问题标题】：Bootstrap nav random highlighting (active?) when moving from .html to .aspx从 .html 移动到 .aspx 时，引导导航随机突出显示（活动？）
【发布时间】：2017-10-13 15:04:58
【问题描述】：

我有一个包含在 index.html 文件中的 Bootstrap 模板。我需要添加一些 c# 代码，所以我将其移至 Default.aspx 页面。

一切正常，但页面加载时突出显示了一个看似随机的导航项（是否处于活动状态）。页面加载时突出显示联系人导航项。我尝试将活动类设置为 Home 项。

<!-- Navigation -->
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="#page-top">Home</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li class="page-scroll active">
                        <a data-toggle="tab" href="#page-top">Home</a>
                    </li>
                    <li class="page-scroll">
                        <a data-toggle="tab" href="#portfolio">Demo's</a>
                    </li>
                    <li class="page-scroll">
                        <a data-toggle="tab" href="#screens">Screen Shots</a>
                    </li>
                    <li class="page-scroll">
                        <a data-toggle="tab" href="#new">New Things</a>
                    </li>
                    <li class="page-scroll">
                        <a data-toggle="tab" href="#about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a data-toggle="tab" href="#contact">Contact</a>
                    </li>
                    <li class="page-scroll">
                        <a href="files/Resume.pdf" target="_blank">Resume</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

突出显示不是随机的，而是来自.active 类。如果您在上面的示例中，Home 将突出显示。无论哪个导航元素具有“活动”类，都会突出显示。我创建了一个示例，通过将Screen shots 更改为活动here 来展示这一点。

如果您想要突出显示 Contact 页面，您需要将该选项卡设置为活动状态：

<li class="page-scroll active">
  <a data-toggle="tab" href="#contact">Contact</a>
</li>

要在多个页面之间切换，您需要通过后端代码手动输出这个active 类。在 C# here 中已经有一个很好的答案。

希望这会有所帮助！ :)

【讨论】：

使用我的代码和您的代码，当页面加载时，联系人仍然是活动导航。当我尝试在 html 文件中设置活动时，没有任何反应，但至少联系人未处于活动状态。我更喜欢在页面加载时没有任何活动，尽管让 Home 活动比让 Contact 活动更可取。这是一个单页应用程序。