html - 如何更改网站各部分之间固定标题的内容

Question

我有一个只有一个页面的网站。该网站有七个部分。 标题是固定的，但我想更改每个部分中的一些内容。 有什么建议吗？ 来自圣保罗/巴西的拥抱

我的代码

<div class="section"id="home">
<header class="navbar navbar-inverse navbar-fixed-top grid_12 ">
    <div class="container col-xs-2 fundo_branco ">
        <div class="navbar-header">
             <!-- responsive nav button left-->
             <button type="button" class="navbar-toggle-left float-left" data-toggle="collapse" data-target=".navbar-collapse">
                 <span class="sr-only">Toggle navigation</span>
                 <i class="fa fa-bars fa-2x"></i>
              </button>
              <!-- /responsive nav button left-->
        </div>
        <!-- main nav  left -->
        <nav class="collapse navbar-collapse navbar-left sobe" role="navigation">
            <ul id="nav" class="nav navbar-nav">
                <li><img src="assets/img/logo_menu.png" alt=""></li>
                <li ><a href="#home">HOME</a></li>
                <li><a href="#welcome">WELCOME</a></li>
                <li><a href="#top-drinks">TOP DRINKS</a></li>
                <li><a href="#portfolio">PORTFOLIO</a></li>
                <li><a href="#help-blog">HELP!BLOG</a></li>
                <li><a href="#franchise">FRANCHISE</a></li>
                <li><a href="#contato">CONTATO</a></li>
            </ul>
        </nav>
        <!-- /main nav left-->
    </div>
   <div id="header" class="container col-xs-3"> <!-- Sugestion@Snappawapa-->
          <h1>Section 1</h1>
    </div>

    <div class="container col-xs-2 col-md-offset-5">
        <div class="navbar-header">
            <!-- responsive nav button right -->
            <button type="button" class="navbar-toggle float-right" data-toggle="collapse" data-target=".navbar-collapsea">
                <span class="sr-only">Toggle navigation</span>
                <i class="fa fa-square-o fa-2x"></i>
            </button>
            <!-- /responsive nav button -->
        </div>

        <!-- main nav right-->
        <nav class="collapse navbar-collapsea navbar-left desce" role="navigation">
            <ul id="nav" class="nav navbar-nav">
                <li>
                    <a href="#features">
                        <img src="assets/img/bloco1.png" alt="">
                    </a>
                </li>
            </ul>
        </nav>
        <!-- /main nav right-->
    </div>        
</header>
</div>

我需要在每个部分中更改 #welcome 部分中此 div 的内容

<div class="container col-xs-3">
     <h1>Welcome!</h1> 
</div>

代码部分#welcome in this page

   <div class="section" id="welcome">

            <script>
    document.getElementById("header").innerHTML = "<h1>Welcome</h1>";
    </script>

这是有效的，但在主页部分也发生了变化。 我想为每个部分保留这个标题。示例:

在欢迎部分

header=<h1>Welcome</h1>

在顶级饮品部分

header=<h1>Top drinks</h1>...

Answer 1

JavaScript 可能会帮助您。给它一个ID:

<div id="header" class="container col-xs-3"> <h1>Este conteúdo muda em cada seção!!!!</h1> </div>

然后您可以使用一些 JavaScript 来更改它的内容:

document.getElementById("header").innerHTML = "<h1>New Header</h1>";

您可以在页面中的元素上使用不同的事件来更改它，方法是将该代码放入一个函数中:

HTML:

<li ><a href="#home" onClick="changeHeader('<h1>New Header</h1>')">HOME</a></li>

JavaScript:

function changeHeader(newStuff){ document.getElementById("header").innerHTML = newStuff; }

希望对你有帮助