html实现tab页面切换

最新推荐文章于 2024-05-08 12:36:30 发布

qq_31281189

最新推荐文章于 2024-05-08 12:36:30 发布

阅读量1.2w

点赞数 3

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/qq_31281189/article/details/52055047

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

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

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

<html>
	
	<body>	
		<a href = "framea.html" target = "showframe">frameA</a></br>

		<a href = "frameb.html" target = "showframe">frameB</a></br>
		<a href = "framec.html" target = "showframe">frameC</a></br>
	</body>
</html>

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

<html>


<frameset cols= "20%,80%" width = "960px" noresize = "true">
	
	<frame src = "framec_content.html" >		
	<frame src = "framea.html" name = "showframe" >	
</frameset>
</html>

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

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

<html>
	
	<body bgcolor = "red">	
FrameA
	</body>
</html>

frameb也是如此

<html>
	
	<body bgcolor = "blue">	
FrameB
	</body>
</html>

framec

<html>
	
	<body bgcolor = "yellow">	
FrameC
	</body>
</html>

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

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

qq_31281189

关注

3
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
html实现tab页面切换

想要达到的样子呢就是这样的点击左边的tab可以切换右边frame页面实现这个的话，首先得有一个大的html文件作为容器承载左边的菜单栏和右边的显示栏，然后左边的菜单栏也是一个html文件，右边有三种显示样式，就得五个html文件，为了区别我们分别将其取名为framea(右边要显示的第一个页面) frameb(右边要显示的第二个页面)framec(右边要显示的第三个页面)
复制链接

扫一扫

专栏目录