Web前端——原生H5+CSS+JS导航栏实现

我不是女神ヾ 2022-11-07 13:26 170阅读 0赞

H5标签

<nav class="nav_bar">
    	<ul class="nav_ul">
    		<li class="nav_btns_normal" id="1" onclick="clickedBar()">Home</li>
    		<li class="nav_btns_normal" id="2" onclick="clickedBar()">About</li>
    		<li class="nav_btns_normal" id="3" onclick="clickedBar()">Service</li>
    	</ul>
    </nav>

CSS样式表

.nav_bar{
        
    	background-color: #333;
    	height: 50px;
    	margin: 0;
    	padding: 0;
    }
    
    .nav_ul{
        
    	list-style: none;
    	padding-left: 30px;
    	padding-top: 0;
    	padding-bottom: 0;
    	margin: 0;
    }
    
    .nav_btns_normal{
        
    	display: inline;
    	text-align: center;
    	font-size: 20px;
    	background-color: #333;
    	text-align: center;
    	line-height: 50px;
    	padding: 12px;
    	color: #fff;
    }
    
    .nav_btns_normal:hover{
        
    	background-color: #FF7F50;
    	cursor: pointer;
    }
    
    .nav_btns_checked{
        
    	display: inline;
    	text-align: center;
    	font-size: 20px;
    	background-color: #FF7F50;
    	text-align: center;
    	line-height: 50px;
    	padding: 12px;
    	color: #fff;
    }
    
    .nav_btns_checked:hover{
        
    	cursor: pointer;
    }

JS代码

最终实现的效果：  
![在这里插入图片描述][2021031215445564.gif]

[2021031215445564.gif]: /images/20221023/1e17cbb34cf94b29b7be67bf92b68214.png