数据结构的尝试

原创于 2018-09-11 16:15:27 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数据结构

css 同时被 2 个专栏收录

9 篇文章

订阅专栏

数据结构

1 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及jQuery实现响应式导航栏的方法。通过定义样式和交互事件，实现了不同页面间的跳转效果，并为每个导航项设置了特定的颜色以增强用户体验。

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

<meta charset=utf-8 />
<style>
body{margin:0}
div{cursor:pointer}
.nav{display:flex;justify-content:space-around}
</style>
<div class=nav></div>
<script src=jq.js></script>
<script>
nav={
	html:'aa',
	list:{
		'首页':{
			style:{
				color:'red'
			},	
			event:{
				click:function(){
					alert(nav.html)
				},
			}	
		},	
		'产品':{
			style:{
				color:'blue'
			},	
			event:{
				click:function(){
					alert($(this).html())
				}
			}	
		},	
		'我的':{
			style:{
				color:'green'
			},	
			event:{
				click:function(){
					alert($(this).html())
				}
			}	
		},	
	}	
}	
for(i in nav.list){
	div='<div>'+i+'</div>'
	$('.nav').append(div)
	for(style in nav.list[i].style){
		$('.nav div:last').css(style,nav.list[i].style[style])
	}	
	for(event in nav.list[i].event){
		$('.nav div:last').on(event,nav.list[i].event[event])
	}
}	

</script>