`

CSS NAV页面效果总结

    博客分类:
  • CSS
 
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>Untitled Document</title>
<script language="javascript" src="jquery1.8.2.js" ></script>
<script language="javascript" src="FusionCharts.js" ></script>
<script language="javascript" src="jquery.easychart.js" ></script>
<script language="javascript" src="default.js" ></script>
<style>
/**节点导航面板*/
.center .nav{
	border-bottom:2px solid #279CEA;	
	height:30px;
	background:#FFFFFF;
	margin-top:5px;
}
 ul{
	list-style:none;
	margin:0;
	padding:0;
	height:100%;
}

 li{
	float:left;
	margin-right:2px;
	background:#D1D1D1;
	height:100%;
	width:60px;
	text-align:center;
	color:#333333;
	cursor:pointer;
	font:12px '宋体';
	line-height:30px;
}

/**tab节点选中*/
.nav .selected{
	background:#279CEA; color:#FFFFFF
}

/**tab节点未选中*/
.nav .noSelected{
	background:#D1D1D1; color:#333333
}
/**节点导航面板 end*/
</style>
<script type="application/javascript">

	window.onload = function(){
			//节点点击事件
			$(".nav ul > li").each(function(index, element) {
				$(element).bind("click",(index+1),function(obj){
					menuClick(obj.data);
				});
			});

			noDataColumn3D('#chart');
	}
	//绑定事件
	function menuClick(id)
	{
		for(var i = 1;i<=5; i++){
			$(".menu_"+i).addClass("noSelected");
			//内容信息页面id
			//$("#detail_"+i).hide();
		  }
		//如果不移除未选中样式直接添加选择样式会被前者覆盖
		$(".menu_"+id).removeClass("noSelected").addClass("selected");
		//内容信息页面id
		//$("#detail_"+id).show();
		alert("第"+id+"个tab 响应");
	};
</script>
</head>
<body>
	<div class="center">
		<div class="nav">
			<ul>
				<li class="menu_1">Menu_01</li>
				<li class="menu_2">Menu_02</li>
				<li class="menu_3">Menu_03</li>
				<li class="menu_4">Menu_04</li>
				<li class="menu_5">Menu_05</li>
			</ul>
		</div>

		<div id="chart">
			22
		</div>
	</div>
</body>
</html>



注:需导入jquery文件

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    CSS导航布局中当前页面的做法

    总结来说,创建CSS导航布局涉及HTML结构的设计、CSS样式的定义以及如何标识当前页面。通过理解这些基本概念,你可以根据项目需求灵活地定制导航栏,使其既美观又实用。同时,不断学习和掌握新的CSS特性,如Flexbox和...

    网上商店的CSS页面布局

    总结,通过巧妙运用CSS,我们可以创建出美观且功能丰富的网上商店页面。无论是导航的动态效果还是Flash的透明背景,都是提升网站专业性和用户满意度的有效手段。然而,随着技术的发展,我们也应关注新的前端技术,如...

    cube-scroll-nav 单页面滑动

    总结,cube-scroll-nav是一种利用现代Web技术实现的创新导航方式,它结合了JavaScript的交互性和CSS3的视觉效果,为用户提供了独特的浏览体验。在设计和实现时,我们需要关注性能、兼容性及无障碍性,以确保所有用户...

    HTML+CSS静态页面设计

    总结来说,"HTML+CSS静态页面设计"项目是一个全面的实践教程,涵盖了HTML的基本结构和CSS的样式设计,适合初学者通过实际操作来巩固理论知识,提升技能水平。通过完成这个项目,不仅能够掌握网页设计的基本流程,还...

    简单的下拉菜单左侧菜单效果css+js效果,可同时使用

    总结来说,这个示例中的下拉菜单效果结合了CSS和JavaScript,实现了简单的交互和视觉效果。CSS负责静态样式和初步的动态效果,而JavaScript则增强了用户体验,处理了更复杂的交互逻辑。通过学习这个案例,你可以更好...

    简单登录注册页面(HTML5、CSS、JS)

    总结,这个“简单登录注册页面”项目展示了HTML5、CSS和JavaScript在前端开发中的基本应用,通过它们的组合,可以创建出交互性强、视觉效果良好的用户界面。了解并熟练掌握这些技术对于任何前端开发者来说都是至关...

    CSS模板\blue-block-nav.rar

    总结来说,`CSS模板\blue-block-nav.rar`是一个实践性的前端开发资源,包含了一个蓝色主题的导航区块设计,涉及到CSS样式设计、HTML结构构建以及可能的图像资源应用。对于学习和使用CSS进行网页设计的人员来说,这是...

    基于HTML5的CSS loading效果

    其中,CSS Loading效果是一种常见的页面加载动画,它在用户等待页面完全加载时提供视觉反馈,提高用户体验。本篇文章将深入探讨如何利用HTML5和CSS3创建炫酷的loading效果。 一、HTML5基础 HTML5是超文本标记语言的...

    原生 H5 商城静态页面(HTML+ CSS+ JS)

    总结来说,原生H5商城静态页面的开发涉及HTML5的新特性、CSS3的布局和动画效果,以及JavaScript的交互实现。这三个技术的结合使得商城页面不仅具有清晰的结构,美观的样式,还能提供丰富的互动体验,满足现代电商...

    基于HTML5/CSS3的清爽后台管理页面(二)

    总结起来,基于HTML5和CSS3的后台管理页面设计利用了新特性的强大功能,实现了结构清晰、视觉美观且交互性强的用户界面。通过深入学习和应用这些技术,开发者可以创建出满足现代需求的高效后台管理系统。

    html css 原生js实现动态京东页面

    在本项目中,我们将深入探讨...总结来说,实现动态京东页面需要掌握HTML的结构设计,CSS的样式控制,以及JavaScript的动态功能实现。通过这个项目,开发者不仅能提升对前端技术的理解,还能锻炼解决实际问题的能力。

    dark-nav-btns_HTML5_CSS3源码_

    总结来说,这个项目是关于使用HTML5的语义化元素和CSS3的高级特性来创建一个具有暗黑风格、具有三维效果的按钮和椭圆形搜索框的网页界面。通过理解和应用这些知识点,开发者可以创建出更具吸引力和用户体验友好的...

    纯css动感背景滑动的导航菜单特效代码

    总结一下,创建这个纯CSS的动感背景滑动导航菜单特效,主要涉及以下知识点: 1. HTML5的`&lt;nav&gt;`元素用于构建导航菜单结构。 2. CSS的`background-image`、`background-size`和`background-position`属性用于设置和...

    CSS RESET个人总结

    在"CSS RESET个人总结"中,我们将深入探讨这个主题。 一、为何需要CSS Reset 1. 浏览器差异:不同的浏览器对HTML元素的默认样式处理不一,如字体大小、行高、内边距、外边距等,这会导致页面在不同浏览器上的显示...

    html+css+js面试总结

    CSS用于美化HTML页面,实现布局和视觉效果。面试中可能会涉及: 1. **选择器**:了解类选择器、ID选择器、标签选择器、后代选择器、伪类等。 2. **盒模型**:理解内容(content)、内边距(padding)、边框(border)和...

    css3实现的tab标签切换效果

    总结来说,CSS3实现的Tab标签切换效果主要依赖于CSS3的`flexbox`布局、伪类选择器如`:hover`, `:active`, `:target`,以及`transition`属性。通过这些特性,我们可以创建出美观且交互性强的Tab组件。同时,结合...

    css+div创建页面实例

    总结,CSS+div创建页面实例是一个综合性的过程,涉及到HTML结构规划、CSS样式编写和响应式设计等多个环节。熟练掌握这些知识点,能帮助你构建出美观、高效且易于维护的网页。通过实践和不断学习,你可以创造出更多...

    OnePageNav单页滚动导航插件用法简介

    为了获得更好的视觉效果,你可以自定义OnePageNav的CSS样式。例如,可以通过设置`active`类来改变选中链接的颜色: ```css .nav .active { color: #FF0000; font-weight: bold; } ``` ### 应用到实际项目 在...

    Div+css页面布局资料(很好很强大)

    通过上述分析可以看出,CSS盒子模型和Div+CSS布局相结合能够帮助我们创建出结构清晰、易于维护且视觉效果优秀的网页。相比于传统的表格布局方法,CSS布局提供了更多灵活性和可扩展性,同时还能提高页面加载速度并...

    css3和h5实现王者荣耀官网

    例如,`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;section&gt;`、`&lt;article&gt;`等元素用于定义页面结构,`&lt;video&gt;`和`&lt;audio&gt;`元素支持多媒体内容的直接嵌入,`&lt;canvas&gt;`则提供了绘制图形的能力,这些都为构建王者荣耀官网提供了强大的支撑...

Global site tag (gtag.js) - Google Analytics