Question

是否有一种简单的方法可以在基本的引导程序导航栏中切换活动链接而无需编写任何JavaScript？

这是我的导航栏

<div class="navbar navbar-static-top">
    <div class="navbar-inner">
        <div class="container">
            <div>
                <ul class="nav" ng-show="isAuthenticated">
                    <li class="active"><a href="/activity/create">Create Activity</a></li>
                    <li><a href="/activity/manage">Manage Activities</a></li>
                    <li><a href="/activity/su">Super User</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

好吧，我不是100％肯定（即使用javascript也不是那么好），但你可以做一些if语句。

if($url=="/activity/create") {echo "class='active'";}

这是php语法。尝试使用JS。

顺便说一句，你使用的是node.js，这是JS，所以如果没有JS，你就无法做到。

Answer 2

您可以通过JS将class属性设置为"active"。我使用外部脚本执行此操作，这是一个片段：

setActive();

function setActive() {

    activePath = document.location.pathname; //get the url of current page

    switch(activePath) {   
    //evaluate activePath (more efficient than nested IFs)

        case "/uptime/":
        //if current page path is /uptime/
            document.getElementById('navuptime').className = "active";
            //set class of element with ID='navuptime' to "active"
            break;
            //break out of switch statement, we're all done

        case "/uptime/domain/":
        //if current page path is /uptime/domain/
            document.getElementById('navuptime').className = "active";
            //just like above, set class of element with ID='navuptime' to "active"
            document.getElementById('navdomain').className = "active";
            //also set the nested navbar element class attribute to "active"
            break;
            //break out of switch statement, we're all done

        default:
        //used if no match was found
            break;
            //i don't do anything if no match was found
    }

在向网站添加网页时，您还必须更新脚本，但在case语句中只有一个switch。

以下是我的导航栏HTML的摘录：

<div class="collapse navbar-collapse navbar-ex1-collapse nudge-left">
    <ul class="nav navbar-nav navbar-right">
        <li><a id="navwifi" href="/wifi">Guest WiFi</a></li>
        <li class="dropdown"><a id="navuptime" class="dropdown-toggle" data-toggle="dropdown" href="#">Uptime Monitoring<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a id="navwan1" href="/uptime/wan1">WAN 1 Connection</a></li>
                <li><a id="navwan2" href="/uptime/wan2">WAN 2 Connection</a></li>
                <li><a id="navdomain" href="/uptime/domain">Domain</a></li>
            </ul>
        </li>
    </ul>
</div><!-- /.navbar-collapse -->

您可以看到每个navbar元素都有一个唯一的ID供JS更新。这个方法适用于我的小网站（少于50页）。

如果使用了诸如 domain.com/uptime/page.html 之类的网页网址，则switch语句无法找到上面写的匹配项。 .. document.location.pathname会返回 /uptime/page.html 。

我总是在每个目录中使用 index.html 文件来保持网址清洁，访问者只需输入 domain.com/uptime 。

如何在没有编写额外的javascript的情况下切换Bootstrap导航栏中的活动导航链接？

2 个答案: