原生js实现可切换式导航栏

最新推荐文章于 2025-05-27 08:43:37 发布

原创最新推荐文章于 2025-05-27 08:43:37 发布 · 8.6k 阅读

52 ·

CC 4.0 BY-SA版权

文章标签：

#js #html #css #切换div #导航栏

前后端相关学习专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现类似新浪网站的导航栏内容切换效果的方法。通过控制div元素的display属性，可以平滑地切换不同的内容区块，同时保持页面布局的一致性和美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前些日子看到个这样的效果：

xinlang

于是就想实现一下，思路是通过js实现多个div的是否显示，也就是display:none;来控制内容的切换，我的效果如下：

wode

由于切换的是div，所以里面的内容不会影响整体功能。下面上代码。

html：

<!DOCTYPE html>
<html>
<head>
    <title>新浪式点击切换导航</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
    <div class="xinlang-leave containerwidth">
        <div class="xinlang-up fluidwidth">
        	<ul class="xlnav-ul">
        		<li class="xlnav-li center-all"><a href="#" class="xinlang-a">视频</a></li>
        		<li class="xlnav-li center-all"><a href="#" class="xinlang-a">秒拍</a></li>
        		<li class="xlnav-li center-all"><a href="#" class="xinlang-a">综艺</a></li>
        	</ul>
        </div>
        <div class="xinlang-down fluidwidth center-all">
        	<div class="xl-box">
        		<div class="xlcontent-img-leave fluidwidth">
        			<img src="./images/1.png" class="xlcontent-img">
        			<div class="xlcontent-desc fluidwidth center-all">测试1号</div>
        		</div>
        	</div>
        	<div class="xl-box">
        		<div class="xlcontent-img-leave fluidwidth">
        			<img src="./images/2.png" class="xlcontent-img">
        			<div class="xlcontent-desc fluidwidth center-all">测试2号</div>
        		</div>
        	</div>
        	<div class="xl-box">
        		<div class="xlcontent-img-leave fluidwidth">
        			<img src="./images/3.png" class="xlcontent-img">
        			<div class="xlcontent-desc fluidwidth center-all">测试3号</div>
        		</div>
        	</div>
        </div>
    </div>
    <script type="text/javascript" src="./js/index.js"></script>
</body>
</html>

css：

/*------------------------公共样式表----------------------------*/
* {
    margin: 0px;
    padding: 0px;
    border: 0px;
}
a {
    text-decoration: none;
}
p {
    text-indent: 16px;
    font-size: 15px;
    color: #333333;
}
.center-all {
    display: flex;
    justify-content: center;
    align-items: center;
}
.center-align {
    display: flex;
    align-items: center;
}
.center-justify {
    display: flex;
    justify-content: center;
}
.latitude-spacearound {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.latitude-spacebetween {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.longitude {
    display: flex;
    flex-direction: column;
}
/*基本不用*/
.fixedwidth {
    width: 1349px;
    margin: 0 auto;
    padding: 0 6%;
    box-sizing: border-box;
}
/*百分比式布局栏*/
.fluidwidth {
    width: 100%;
    box-sizing: border-box;
}
/*------------------------本网页样式表----------------------------*/
.containerwidth {
    width: 360px;
    margin: 0 auto;
}
.xinlang-leave {
    margin-top: 50px;
    height: 275px;
    /*background-color: #AAD2C7;*/
}
/*-----------导航部分-----------*/
.xinlang-up {
    height: 35px;
    border: 1px solid #DBDEE1;
    background-color: #F8F8F8;
}
.xlnav-ul {
    background-color: gray;
}
.xlnav-li {
    float: left;
    width: 58px;
    height: 35px;
    padding-bottom: 3px;
    box-sizing: border-box;
    list-style: none;
    margin-top: -1px;
    border-top: 3px solid transparent;
}
.xinlang-a {
    font-size: 16px;
    color: black;
}
/*-----------内容部分-----------*/
.xinlang-down {
    height: 240px;
    /*background-color: red;*/
}
.xl-box {
    display: none;
    width: 300px;
    /*background-color: pink;*/
}
.xlcontent-img-leave {
    height: 200px;
    /*background-color: blue;*/
}
.xlcontent-img {
    width: 100%;
}
.xlcontent-desc {
    position: relative;
    height: 50px;
    margin-top: -55px;
    color: white;
    background: rgba(0,0,0,0.4);
}

js：

var liitem = document.getElementsByClassName("xlnav-li");
var boxitem = document.getElementsByClassName("xl-box");
var aitem = document.getElementsByClassName("xinlang-a");
boxitem[0].style.display = "block";
liitem[0].style.borderTop = "3px solid #ff8400";
liitem[0].style.borderLeft = "none";
liitem[0].style.borderRight = "1px solid #dbdee1";
liitem[0].style.backgroundColor = "white";
aitem[0].style.color = "#ff8400";
for (var i = 0; i < liitem.length; i++) {
	(function(i){
		liitem[i].onmouseover = function() {
			for (var j = 0; j < boxitem.length; j++) {
				boxitem[j].style.display = "none";
				liitem[j].style.borderTop = "transparent";
				liitem[j].style.borderLeft = "none";
				liitem[j].style.borderRight = "none";
				liitem[j].style.backgroundColor = "transparent";
			}
			boxitem[i].style.display = "block";
			liitem[i].style.borderTop = "3px solid #ff8400";
			liitem[i].style.borderLeft = "1px solid #dbdee1";
			liitem[i].style.borderRight = "1px solid #dbdee1";
			liitem[i].style.backgroundColor = "white";
			if (i==0) {
				liitem[i].style.borderLeft = "none";
			}
		}
	})(i)
}
for (var k = 0; k < liitem.length; k++) {
	(function(k){
		aitem[k].onmouseover = function() {
			for (var l = 0; l < aitem.length; l++) {
				aitem[l].style.color = "black";
			}
			aitem[k].style.color = "#ff8400";
			if (k==0) {
				liitem[k].style.borderLeft = "none";
			}
		}
		aitem[k].onmouseout = function() {
			aitem[k].style.color = "black";
		}
	})(k)
}

emmm.....有点小代码洁癖，导航栏和原效果基本做成一模一样了，虽然有点代码冗余。。。

图和这篇文章里的图一样，为了方便。。