js 带图标的导航栏 原生

HTML代码

<ul id="nav" class="nav">
	<li id='0'>
		<div><img src="img/08.jpg" /></div>
		<p>文字</p>
	</li>
	<li id='1'>
		<div><img src="img/09.jpg" /></div>
		<p>文字</p>
	</li>
	<li id='2'>
		<div><img src="img/10.jpg" /></div>
		<p>文字</p>
	</li>
	<li id='3'>
		<div><img src="img/11.jpg" /></div>
		<p>文字</p>
	</li>
	<li id='4'>
		<div><img src="img/12.jpg" /></div>
		<p>文字</p>
	</li>
	<li id='5'>
		<div><img src="img/13.jpg" /></div>
		<p>文字</p>
	</li>
</ul>

 CSS代码

.nav ul{
	width: 714px;
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0px;
	margin-top: 30px;
}
.nav ul li{
	list-style-type: none;
	width: 119px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-bottom: 2px solid #000000;
	font-size: 12px;
	color: #777777;
	cursor:pointer;
}
.nav ul li div{
	width: 40px;
	height:40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

 JS代码：

var li = document.getElementById("nav").getElementsByTagName('li');
var imageUrls=['img/08.jpg','img/09.jpg','img/10.jpg','img/11.jpg','img/12.jpg','img/13.jpg'];
var imageUrlsActive=['img/08-1.jpg','img/09-1.jpg','img/10-1.jpg','img/11-1.jpg','img/12-1.jpg','img/13-1.jpg'];
var color = '#777777';
var colorActive = '#D19A48';
console.log(imageUrls[0])
li[0].getElementsByTagName('img')[0].src = imageUrlsActive[0];
li[0].getElementsByTagName('p')[0].style.color = colorActive;
li[0].style.borderBottom = '2px solid '+colorActive;

for(var i=0;i<li.length;i++){
	li[i].onclick=function(){
		var img = document.getElementById("nav").getElementsByTagName('img');
		for(var j=0;j<li.length;j++){
				li[j].getElementsByTagName('img')[0].src = imageUrls[j];
				li[j].getElementsByTagName('p')[0].style.color = color;
				li[j].style.borderBottom = '2px solid '+color;
		}
		var imgUrl = this.getElementsByTagName('img')[0].src.split('/');
		var imgUrl = imgUrl[imgUrl.length-1];
		console.log(imgUrl)
		var imgUrl = imgUrl.split('.');
		console.log(imgUrl)
		console.log(imgUrl[0]+'-1.'+imgUrl[1])
		this.getElementsByTagName('img')[0].src = imageUrlsActive[parseInt(this.id)]
		this.getElementsByTagName('p')[0].style.color = colorActive;
		this.style.borderBottom = '2px solid '+colorActive;
	}
}