使用引导程序向导航栏添加外部链接

Question

是否可以使用引导程序在导航栏中包含外部链接？当我将菜单项文本包装在链接标签中时，链接不起作用......我错过了什么吗？具体来说，我想向导航菜单添加一个外部链接，其中其他项目只是链接到页面上的区域。

Answer 1

我遇到了同样的问题；我只是用 JQuery 重定向到外部链接，如下所示：

HTML：

<ul class="nav">
    <li><a href="http://www.google.com" class="external">External</a></li>
    <li>...</li>
</ul>

JQuery:

function changePage(event) {
    if($(event.target).hasClass('external')) {
        window.location.href = $(event.target).attr('href');
        return;
    }
    //...
}
$(function () {
    $('.nav li').click( changePage );
}

Answer 2

我刚试过这个，在 webkit 中没有发现这段代码有任何问题：

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="http://google.com" target="_blank">Google</a></li>
                <li><a href="http://yahoo.com" target="_self">Yahoo</a></li>
            </ul>
        </div>
    </div>
</nav>

JSFiddle：http://jsfiddle.net/62DJW/1/（请注意，默认目标 target="_self" 的外部链接不会在 JSFiddle 中加载，但我在本地确认）。

您能否为您的导航栏添加示例 HTML/任何自定义 CSS？没有理由必须用 JQuery 或 JS 覆盖任何内容。