展示效果：
HTML代码：
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>nav&sideMenu</title> <link rel="stylesheet" href="./index1.css"></head><body><ul class="topmenu"><li><a href="#home" class="active">主页</a></li><li><a href="#news">新闻</a></li><li><a href="#contact">联系我们</a></li><div class="dropdown"><a href="#dropmenu" class="dropbtn">下拉菜单1</a><div class="dropdown-content"><a href="#11">链接 1</a><a href="#12">链接 2</a><a href="#13">链接 3</a></div></div><li><a href="#about">关于我们</a></li><div class="dropdown"><a href="#dropmenu" class="dropbtn">下拉菜单2</a><div class="dropdown-content"><a href="#21">链接 1</a><a href="#21">链接 2</a><a href="#22">链接 3</a></div></div></ul><div class="clearfix"><div class="column sidemenu"><ul><li><a href="#flight" class="active">The Flight</a></li><li><a href="#city" >The City</a></li><li><a href="#island">The Island</a></li><li><a href="#food">The Food</a></li><li><a href="#people">The People</a></li><li><a href="#history">The History</a></li><li><a href="#oceans">The Oceans</a></li></ul></div><div class="column content"><div class="myActive"><div class="header"><h1>The Flight</h1></div><h1>1</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p><p>Lorem ipsum dolor sit amet consectetur adipisicing </p></div><div><div class="header"><h1>The City</h1></div><h1>2</h1><p>sadqwddasdas</p><p>sad</p></div><div><div class="header"><h1>The Island</h1></div><h1>3</h1><p>3</p><p>sad1</p></div><div><div class="header"><h1>The Food</h1></div><h1>4</h1><p>4</p><p>asdic</p></div><div><div class="header"><h1>The People</h1></div><h1>5</h1><p>5</p><p>casa</p></div><div><div class="header"><h1>The History</h1></div><h1>6</h1><p>6</p><p>casa</p></div><div><div class="header"><h1>The Oceans</h1></div><h1>sad</h1><p>Oceans</p><p>casa</p></div></div></div><div class="footer"><p>底部文本</p></div></body><script>// 实现选项卡功能function init() {// select all divlet tabs = document.querySelectorAll('.topmenu li>a,.topmenu div div a')let tabs1 = document.querySelectorAll('.sidemenu li>a')let contents = document.querySelectorAll('.content>div')console.log(tabs);console.log(contents);for (let i = 0; i < tabs.length; i++) {/*顶部导航栏*/tabs[i].addEventListener('click', function(){// clean all activefor (let j = 0; j < tabs.length; j++) {tabs[j].classList.remove('active')// contents[j].classList.remove('active') }// add active to itabs[i].classList.add('active')// contents[i].classList.add('active')}) }for (let i = 0; i < tabs1.length; i++) {tabs1[i].addEventListener('click', function(){// add click eventfor (let j = 0; j < tabs1.length; j++) {// clean all activetabs1[j].classList.remove('active')contents[j].classList.remove('myActive') }tabs1[i].classList.add('active')// add active to icontents[i].classList.add('myActive')}) }}init();</script></html>
CSS代码index.css
* {box-sizing: border-box;}body {margin: 0;}.header {background-color: #2196F3;color: white;text-align: center;padding: 15px;}.footer {/* 底部 */background-color: #444;color: white;padding: 15px;width: 100%;position: fixed;bottom: 0;}.dropdown {display: inline-block;}.dropdown-content {display: none;position: absolute;/*子绝父相*/background-color: #777;min-width: 110px;/*最小宽度*/box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}.dropbtn{ /*下拉按钮*/display: inline-block;color: white;text-align: center;padding: 16px;text-decoration: none;}.dropdown-content a {color:white;padding: 16px;text-decoration: none;display: block;}.dropdown-content a:hover {background-color:#222}.dropdown:hover .dropdown-content {display:block;z-index: 99;/*最上层显示*/}.topmenu {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #777;}.topmenu li {float: left;}.topmenu li a {display: inline-block;color: white;text-align: center;padding: 16px;text-decoration: none;}.topmenu li a:hover{background-color: #222;}.topmenu li a.active {color: white;background-color: #4CAF50;}.column {float: left;padding: 15px;}.clearfix{/* background-color: orange; */}.clearfix::after {content: "";clear: both;display: table;}.sidemenu{width: 25%;}.content {right: 0;width: 75%;}.content > div{position: absolute;overflow: hidden;width: 75%;background-color: white;border: 1px solid #dddddd;text-align: center;background-color: #4CAF50;}.myActive {z-index: 10;background: white;border: 1px solid #dddddd;border-bottom: none;}.sidemenu ul {list-style-type: none;margin: 0;padding: 0;}.sidemenu li a {margin-bottom: 4px;display: block;padding: 8px;background-color: #eee;text-decoration: none;color: #666;}.sidemenu li a:hover {background-color: #555;color: white;}.sidemenu li a.active {background-color: #008CBA;color: white;}
