【问题标题】:How can I combine navbar and pagination?如何结合导航栏和分页?
【发布时间】:2016-06-11 06:56:04
【问题描述】:

当我单击导航栏的每个项目时,我想转到一个新选项卡,但是我正在使用分页(不确定我是否正确使用它),它引导我到预期的页面部分,但在同一页面中没有在新标签中。我该如何解决这个问题?

<div class="container">
<nav class="navbar navbar-dark bg-primary navbar-fixed-top pagination pagination-sm">
    <div class="nav navbar-nav">
        <a class="nav-item nav-link active page-item" href="#monajalal">Mona Jalal <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link page-item" href="#education">Education</a>
        <a class="nav-item nav-link page-item" href="#experience">Experience</a>
        <a class="nav-item nav-link page-item" href="#courseworks">Courseworks</a>
        <a class="nav-item nav-link page-item" href="#teaching">Teaching</a>
        <a class="nav-item nav-link page-item" href="#projects">Projects</a>
        <a class="navbar-brand pull-sm-right m-r-0" href="https://github.com/monajalal"><i class="fa fa-github fa-lg"></i></a>
        <a class="navbar-brand pull-sm-right m-r-2" href="https://twitter.com/MonaJalal_"><i class="fa fa-twitter fa-lg"></i></a>
        <a class="navbar-brand pull-sm-right m-r-4" href="https://www.linkedin.com/in/mona-jalal"><i class="fa fa-linkedin fa-lg"></i></a>
        <a class="navbar-brand pull-sm-right m-r-6" href="http://stackoverflow.com/users/2414957/mona-jalal"><i class="fa fa-stack-overflow fa-lg"></i></a>

    </div>
</nav>
</div>

【问题讨论】:

    标签: css twitter-bootstrap pagination navbar


    【解决方案1】:

    添加 target="_blank" 可能会有所帮助,例如:

    <a class="nav-item nav-link page-item" href="#education" target="_blank">Education</a>
    

    【讨论】:

    • 所以即使它在新标签页中打开,我仍然可以浏览到整个内容并查看其他页面的内容
    • 啊,我明白了。 Target="_blank" 在新选项卡中打开链接。由于链接是相对的,这将在新选项卡中打开您的主页,然后 # 告诉它滚动到具有匹配 ID 的部分。您可能想要的是创建几个不同的页面,每个部分一个。然后让 href 指向该页面(href="/subsections/this_section.html")。这样,用户可以通过不同的部分滚动主页,或者他们可以使用导航栏到达特定的部分页面。我说得通吗?
    猜你喜欢
    • 2022-12-18
    • 2018-12-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-07-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多