请用html,css和JavaScript写出符合以下要求的代码 要求:需要有侧边导航栏和面包屑导航,侧边导航栏点击时需要使页面滑动到对应内容位置,
时间: 2024-02-15 09:01:38 浏览: 22
以下是一个简单的示例代码,包含了侧边导航栏和面包屑导航,并且点击侧边导航栏时可以滑动到对应的内容位置。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>侧边导航栏和面包屑导航示例</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#nav {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #ccc;
padding: 20px;
box-sizing: border-box;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav li {
margin-bottom: 10px;
}
#nav a {
display: block;
color: #333;
text-decoration: none;
padding: 5px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
#nav a:hover {
background-color: #999;
color: #fff;
}
#content {
margin-left: 200px;
padding: 20px;
box-sizing: border-box;
}
.breadcrumb {
margin-bottom: 20px;
}
.breadcrumb a {
color: #333;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</div>
<div id="content">
<div class="breadcrumb">
<a href="#">Home</a> > <a href="#">Section</a> > Subsection
</div>
<div id="section1">
<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor mauris, non lacinia nisl. Curabitur ut lacinia erat, at faucibus massa. Nullam at est quis sapien cursus hendrerit. Nunc sit amet leo ut justo suscipit porta et vel ante. Curabitur aliquam odio ac mauris finibus, ac sollicitudin est aliquet. Proin a diam quis arcu interdum hendrerit. Donec quis nunc sit amet elit bibendum bibendum vel nec erat. Nulla facilisi. Mauris tincidunt gravida mauris, sed auctor ligula rutrum eu. Duis vitae eros euismod, facilisis ligula vel, iaculis nulla. Fusce egestas mauris auctor, convallis nisl vel, aliquet arcu. Sed ultrices pulvinar odio, ac bibendum ipsum fermentum id. Sed vel massa ut mauris ultricies pharetra. Cras vel sapien euismod, ultrices ipsum nec, bibendum ante.</p>
</div>
<div id="section2">
<h2>Section 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor mauris, non lacinia nisl. Curabitur ut lacinia erat, at faucibus massa. Nullam at est quis sapien cursus hendrerit. Nunc sit amet leo ut justo suscipit porta et vel ante. Curabitur aliquam odio ac mauris finibus, ac sollicitudin est aliquet. Proin a diam quis arcu interdum hendrerit. Donec quis nunc sit amet elit bibendum bibendum vel nec erat. Nulla facilisi. Mauris tincidunt gravida mauris, sed auctor ligula rutrum eu. Duis vitae eros euismod, facilisis ligula vel, iaculis nulla. Fusce egestas mauris auctor, convallis nisl vel, aliquet arcu. Sed ultrices pulvinar odio, ac bibendum ipsum fermentum id. Sed vel massa ut mauris ultricies pharetra. Cras vel sapien euismod, ultrices ipsum nec, bibendum ante.</p>
</div>
<div id="section3">
<h2>Section 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor mauris, non lacinia nisl. Curabitur ut lacinia erat, at faucibus massa. Nullam at est quis sapien cursus hendrerit. Nunc sit amet leo ut justo suscipit porta et vel ante. Curabitur aliquam odio ac mauris finibus, ac sollicitudin est aliquet. Proin a diam quis arcu interdum hendrerit. Donec quis nunc sit amet elit bibendum bibendum vel nec erat. Nulla facilisi. Mauris tincidunt gravida mauris, sed auctor ligula rutrum eu. Duis vitae eros euismod, facilisis ligula vel, iaculis nulla. Fusce egestas mauris auctor, convallis nisl vel, aliquet arcu. Sed ultrices pulvinar odio, ac bibendum ipsum fermentum id. Sed vel massa ut mauris ultricies pharetra. Cras vel sapien euismod, ultrices ipsum nec, bibendum ante.</p>
</div>
</div>
<script>
var navLinks = document.querySelectorAll('#nav a');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', function(e) {
e.preventDefault();
var sectionId = this.getAttribute('href');
var section = document.querySelector(sectionId);
var sectionTop = section.offsetTop;
window.scrollTo({
top: sectionTop,
behavior: 'smooth'
});
});
}
</script>
</body>
</html>
```
CSS样式中定义了侧边导航栏和面包屑导航的样式,其中侧边导航栏使用了固定定位,并且使用了box-sizing属性来保证padding不会影响元素的宽度和高度。
JavaScript代码中使用了addEventListener来监听侧边导航栏中每个链接的点击事件,当点击链接时,会获取对应的内容区块的位置,并使用window.scrollTo函数来滑动到对应位置,使用了behavior属性来实现平滑滚动的效果。