展示效果:
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 div
let 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 active
for (let j = 0; j < tabs.length; j++) {
tabs[j].classList.remove('active')
// contents[j].classList.remove('active')
}
// add active to i
tabs[i].classList.add('active')
// contents[i].classList.add('active')
})
}
for (let i = 0; i < tabs1.length; i++) {
tabs1[i].addEventListener('click', function(){// add click event
for (let j = 0; j < tabs1.length; j++) {// clean all active
tabs1[j].classList.remove('active')
contents[j].classList.remove('myActive')
}
tabs1[i].classList.add('active')// add active to i
contents[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;
}