a.css
html, body { padding: 0; margin: 0 } ol.menu { width: 100%; text-align: left; padding: 0 !important; list-style: none; border: 0.1rem solid #ddd; border-radius: 0.3rem; margin-top: 2rem !important; max-width: 40rem; margin: 0 auto } ol.menu li { border-bottom: 0.1rem solid #ddd; padding: 0.2rem 0.5rem } ol.menu li.active { background-color: #F7F7F7 } ol.menu a { display: block }
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>测试</title> <link rel="stylesheet" href="css/a.css"> </head> <body> <main class="markdown-body"> <nav> <ol class="menu"> <li class=""> <a href="a.html">a页面</a> </li> <li class=""> <a href="b.html">b页面</a> </li> <li class=""> <a href="c.html">c页面</a> </li> </ol> </nav> <div id="barba-wrapper"> <div class="barba-container homepage"> <p>首页的内容</p> </div> </div> </main> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-73202407-1', 'auto'); ga('send', 'pageview'); </script> <script src="js/barba.min.js" type="text/javascript"></script> <script src="js/main.js" type="text/javascript"></script> </body> </html>
a.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>测试</title> <link rel="stylesheet" href="css/a.css"> </head> <body> <main class="markdown-body"> <nav> <ol class="menu"> <li class=""> <a href="a.html">a页面</a> </li> <li class=""> <a href="b.html">b页面</a> </li> <li class=""> <a href="c.html">c页面</a> </li> </ol> </nav> <div id="barba-wrapper"> <div class="barba-container homepage"> <p>A 页面的内容</p> </div> </div> </main> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-73202407-1', 'auto'); ga('send', 'pageview'); </script> <script src="js/barba.min.js" type="text/javascript"></script> <script src="js/main.js" type="text/javascript"></script> </body> </html>