|
Сообщение от Alexander3928
|
|
Можно небольшой пример?
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div,
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
ul.tabs {
position: relative;
width: 100%;
height: 50px;
padding: 0;
margin: 0;
top: 0;
list-style: none;
overflow: hidden;
background-color: #AF5931;
}
li {
float: left;
width: 25%;
}
a {
line-height: .2em;
text-decoration: none;
text-align: center;
display: block;
color: #F0FFF0;
padding: 0.5em 0;
font-size: 2em;
font-weight: bold;
-webkit-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
transition: 0.8s ease-in-out;
}
a:hover {
color: #00BFFF;
}
#dizzy {
background-color: #1E90FF;
}
#ninja {
background-color: #D675FF;
}
#missy {
background-color: #FFFF85;
}
@media screen and (max-width: 800px) {
ul.tabs {
height: 15px;
position: fixed;
top: 0;
}
#dizzy {
margin-top: 15px;
}
a {
font-size: .7em;
line-height: .1em;
}
}
</style>
<script>
document.addEventListener('click', function(event) {
let target = event.target;
if (target = target.closest('a[href*="#"]')) {
event.preventDefault();
const anchorsId = target.hash;
document.querySelector(anchorsId).scrollIntoView({
behavior: "smooth",
block: "start"
});
}
});
</script>
</head>
<body>
<ul class="tabs">
<li><a class="tab" href="#dizzy">Dizzy</a></li>
<li><a class="tab" href="#ninja">Ninja</a></li>
<li><a class="tab" href="#missy">Missy</a></li>
</ul>
<div id="dizzy">Dizzy
<!-- panel content -->
</div>
<div id="ninja">Ninja
<!-- panel content -->
</div>
<div id="missy">Missy
<!-- panel content -->
</div>
</body>
</html>