<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 0.3rem;
}
li {
list-style: none;
}
.nav {
width: 100%;
height: 1rem;
padding: 0 0.78rem;
color: #fff;
border: 0.04rem solid;
border-image: linear-gradient(0deg, rgba(0, 115, 255, 1), rgba(0, 240, 255, 1)) 10 10;
background: linear-gradient(90deg, rgba(11, 32, 104, 1), rgba(119, 40, 240, 1), rgba(11, 32, 104, 1));
}
.navBar {
width: 100%;
height: 100%;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
display: flex;
align-items: center;
box-sizing: border-box;
}
.nav ul li {
float: left;
margin-right: 0.83rem;
flex: 1;
text-align: center;
padding-bottom: 0.15rem;
padding-top: 0.15rem;
}
.hawe_barRed {
border-bottom: 1px solid;
}
.navBar::-webkit-scrollbar {
display: none
}
</style>
</head>
<body>
<div class="nav">
<ul class="navBar">
<li class="hawe_barRed">M系列</li>
<li>R系列</li>
<li>E系列</li>
<li>H系列</li>
<li>J系列</li>
<li>K系列</li>
<li>M系列</li>
<li>N系列</li>
</ul>
</div>
</body>
<script>
// 导航栏的颜色 点击变红
$(".nav ul li").click(function () {
$(".nav ul li").eq($(this).index()).addClass("hawe_barRed").siblings().removeClass("hawe_barRed");
})
</script>
</html>
可滑动导航栏隐藏滚动条
最新推荐文章于 2023-03-27 10:59:59 发布