js实现读取json动态设置导航栏数目-CSDN博客

本文链接：https://blog.csdn.net/qq_45037925/article/details/110288096

该博客展示了如何使用JavaScript从JSON数据动态创建导航栏。通过解析JSON，结合HTML和CSS，实现在页面加载时自定义导航栏的数量和样式。

摘要由CSDN通过智能技术生成

效果

在这里插入图片描述

js

初始化时执行一次loadjson_nav()就可以了。

function loadjson_nav(){
   
	AJAX.load({
   
			'method' : 'get',
			'file' : '${pageContext.request.contextPath }/json/CaseList.json',
			'async' : false
				  },
				 function(result){
   
					 //console.log(result);
					 if (result!= undefined ) {
   
					
					 
					 	var jsonnav1=result.图像分割;
					 	var jsonnav2=result.目标定位;
					 	var jsonnav3=result.图像分类;
					 	//console.log(nav1);
					 	show_nav(jsonnav1,1);
					 	show_nav(jsonnav2,2);
					 	show_nav(jsonnav3,3);
						
						
					 
					 
					 
					//alert (TrainSetNumber);
					
					 }
					 else{
   
						//alert ("!!!");
						 console.log("!!!");
					 }
				  });

}

function show_nav(jsonnav1,flag_sn){
   //flag_sn取值：1，2，3，对应模板li1，2，3
	
	for(var i=0;i<jsonnav1.length;i++)
	{
   
		var name=jsonnav1[i].Dataset;
		if(i==0)
			{
   
			document.getElementById("li"+flag_sn).style.display="block";
			var a=document.getElementById("li"+flag_sn).children[1];
			//console.log(a);
			a.innerHTML=name;
			}
		
		else
		{
   
			var sourceNode = document.getElementById("li"+flag_sn); // 获得被克隆的节点对象   
			var clonedNode = sourceNode.cloneNode(true); // 克隆节点
			clonedNode.setAttribute("id", "li"+flag_sn+"_" + i); // 修改一下id 值，避免id 重复   
			sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点   
			var a=document