html实现tab页面切换

想要达到的样子呢就是这样的

html实现tab页面切换_第1张图片

html实现tab页面切换_第2张图片

点击左边的tab可以切换右边frame页面

实现这个的话,首先得有一个大的html文件作为容器承载左边的菜单栏和右边的显示栏,然后左边的菜单栏也是一个html文件,右边有三种显示样式,就得五个html文件,为了区别我们分别将其取名为framea(右边要显示的第一个页面)  frameb(右边要显示的第二个页面)framec(右边要显示的第三个页面)   mainframe(父容器)   contentframe(左边的菜单页面)

首先是我们的菜单页面,布局很简单,就是三个a标签,指示着三个超链接


	
		
		frameA
frameB
frameC

假定第一次打开页面时,显示的是页面framea,那么我们的父容器就应该这么写





	
			
		

frameset是来控制里面的frame标签的,cols表示水平布局,左边占20%的空间,右边占80%的空间,noresize属性为false,设置了不允许鼠标的拖动改变左右两个布局的大小。当几个html文件放在同一个目录下时,我们指定其资源目录才能这么写,在给第二个frame指定资源后,给它一个name,这样在我们的菜单页点击超链接后,打开页面的target指向他即可了,不然我们点击超链接,页面会在菜单所在的那个位置打开,达不到我们想要的效果。

接下来是framea,很简单 只是给了个背景颜色加以区分就ok了


	
		
FrameA
	
frameb也是如此


	
		
FrameB
	

framec


	
		
FrameC
	
最后要做的就是把这几个html文件放在同一个目录下,用浏览器打开mainframe就可以达到我们想要的效果了。








ps:小弟也是初学html,如果有哪些言论不准确或者错误的地方,烦请各位大神不吝赐教



你可能感兴趣的:(html)