Question

我想在bootstrap中构建页眉和页脚，这样我现在的页面将被标记为相同。

例如，如果我选择＆＃34;文章＆＃34;，它将在标题上被选中，但我希望它也可以在页脚中选择。

此外，我希望能够通过标题或页脚导航。即我希望两者的行为方式相同。

<nav class="navbars navbar-inverse">      
    <div class="container">

        <div class="navbar-header">
            <a class="navbar-brand" href="#">My website</a>
        </div>      

        <div class="collapse navbar-collapse" id="navbar-collapsable-section">
            <ul class="nav navbar-nav navbar-right">            
                <li class="active"><a href="index.html" id="menu_linkto_home">Home</a></li>
                <li><a href="index.html" id="menu_linkto_articles">Articles</a></li> 
                <li><a href="aboutUs.html" id="menu_linkto_aboutus">About us</a></li>           
            </ul>
        </div>                  
    </div>
</nav>

我该怎么办？谢谢！

Answer 1

您可以为页眉和页脚中的链接指定相同的CSS类，例如“Active”：

<style>
    .active {
        background: #ddd;
    }
</style>

标题链接：

<a class="active" id="header-about-link" href="/about">About</a>

页脚链接：

<a class="active" id="footer-about-link" href="/about">About</a>

这两个链接看起来都一样，并链接到同一个位置。

如果需要使用jQuery动态应用此CSS类，可以使用以下内容：

<script>
    $('#header-about-link').addClass('active');
    $('#footer-about-link').addClass('active');
</script>

希望这有帮助！

Answer 2

这是一个非常粗糙的版本。我故意使用其他使用过的类名等而不是DOM遍历，以便您获得基本的想法。

editButtonItem

如何在引导程序中制作相同的页眉和页脚？

2 个答案: