Question

因此，我旨在创建一个与导航栏一起使用的单页应用程序。这是一个音乐评论网站，因此导航栏上会显示“ Pop”，“ HipHop”和“ Jazz”。对于每种音乐类型，我都有一个单独的html页面，但我只想拥有一个大的html页面。

我有可以使此功能起作用的Javascript代码，但是我不确定如何编辑导航栏的内容以使这种情况发生。

这是我的JavaScript文件和导航栏，如下所示：

我将非常感谢您的帮助

    pages: [],
    show: new Event('show'),
    init: function(){
        app.pages = document.querySelectorAll('.page');
        app.pages.forEach((pg)=>{
            pg.addEventListener('show', app.pageShown);
        })

        document.querySelectorAll('.nav-link').forEach((link)=>{
            link.addEventListener('click', app.nav);
        })
        history.replaceState({}, 'Home', '#home');
        window.addEventListener('popstate', app.poppin);
    },
    nav: function(ev){
        ev.preventDefault();
        let currentPage = ev.target.getAttribute('data-target');
        document.querySelector('.active').classList.remove('active');
        document.getElementById(currentPage).classList.add('active');
        console.log(currentPage)
        history.pushState({}, currentPage, `#${currentPage}`);
        document.getElementById(currentPage).dispatchEvent(app.show);
    },
    pageShown: function(ev){
        console.log('Page', ev.target.id, 'just shown');
        let h1 = ev.target.querySelector('h1');
        h1.classList.add('big')
        setTimeout((h)=>{
            h.classList.remove('big');
        }, 1200, h1);
    },
    poppin: function(ev){
        console.log(location.hash, 'popstate event');
        let hash = location.hash.replace('#' ,'');
        document.querySelector('.active').classList.remove('active');
        document.getElementById(hash).classList.add('active');
        console.log(hash)
        //history.pushState({}, currentPage, `#${currentPage}`);
        document.getElementById(hash).dispatchEvent(app.show);
    }
}

document.addEventListener('DOMContentLoaded', app.init);

NAVBAR: 

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="statichtmlpage.html">Home</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
                <a class="nav-item nav-link" href="pop.html">pop</a>
                <a class="nav-item nav-link" href="hiphop.html">hiphop</a>
                <a class="nav-item nav-link" href="jazz.html">jazz</a>
                <a class="nav-item nav-link" href="#">Absolute trash</a>

Answer 1

我从https://www.w3schools.com/howto/howto_js_tabs.asp中获得了大部分收益
我相信这已经接近您的要求。让我知道这是否可以解决您的问题。
我要研究的一个框架是VueJS（https://vuejs.org/）。您将可以使用可用于增强应用程序的其他功能来实现相同的结果。如果您对服务器端渲染感兴趣，那么我将研究NuxtJS（https://nuxtjs.org/guide）。

function transition(genreName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(genreName).style.display = "block";
  return tablinks
}

function openTab(evt, genreName) {
  transition(genreName)
  evt.currentTarget.className += " active";
}

function tabLink(genreName) {
  var tablinks = transition(genreName)
  for (i = 0; i < tablinks.length; i++) {
    if (tablinks[i].innerHTML == genreName) {
      tablinks[i].className += " active"
    }
  }
}

/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 0px solid #ccc;
  border-top: none;
}

#Pop {
  display: block
}

<div class="tab">
  <button class="tablinks active" onclick="openTab(event, 'Pop')">Pop</button>
  <button class="tablinks" onclick="openTab(event, 'HipHop')">HipHop</button>
  <button class="tablinks" onclick="openTab(event, 'Jazz')">Jazz</button>
</div>

<div id="Pop" class="tabcontent">
  <h3>Pop</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus ut massa et ullamcorper. In hac habitasse platea dictumst. Quisque tempor odio sit amet aliquam iaculis.</p>
  <p>If you are feeling Jazzy click <a href="#!" onclick="tabLink('Jazz')">HERE</a></p>
</div>

<div id="HipHop" class="tabcontent">
  <h3>HipHop</h3>
  <p>Sed eu efficitur lorem. Pellentesque varius nulla nec lectus consectetur ullamcorper. In at urna orci. Sed ut malesuada elit, vel tempor leo.</p>
</div>

<div id="Jazz" class="tabcontent">
  <h3>Jazz</h3>
  <p>Fusce arcu magna, mollis eu cursus ut, mollis sit amet quam. Aenean mattis turpis vitae iaculis venenatis. Cras tempus gravida quam in malesuada.</p>
</div>

如何使用导航栏创建单页应用程序？

1 个答案: