Question

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

我的代码

    var navController = TabbedNavigationController(rootViewController: firstView)

    // navController.navigationBar.frame.origin.y = 0
    self.window?.rootViewController = navController
    self.window?.makeKeyAndVisible()
    // navController.navigationBar.frame.origin.y = 20.0

我需要在每个部分更改＃divcome

部分中此div的内容

<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>

代码部分＃欢迎访问此页面

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

这是有效的，但在家里也有变化。我想为每个部分保留此标题。示例：

欢迎栏目

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

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

在顶部饮料

header=<h1>Welcome</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; }

希望这有帮助

如何更改站点各部分之间固定标头的内容

1 个答案: