html框架点击左边目录内容显示在右边框架里

2024年6月10日 152次阅读 来源: 可怜少年秃了头

html框架点击左边目录内容显示在右边框架 定义框架为目录 标题 内容 这三个框架，我们点击左边的目录，目录里面的内容会出现在内容这个框架里看下边怎么操作。

先创建第一个index.html文件，代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<title>index</title>
</head>
<frameset cols="20%,80%"><!--定义页面左边分20%右边分80%-->
<frame src="目录.html"name="left"><!--定义左边框架使用文件为目录.html框架的名字为lefr--><frameset rows="20%,80%"><!--定义右边80%分为上下两个框架一个20%一个80%-->
<frame src="标题.html" name="rightup"><!--80％中上边20%给标题.html文件使用，框架名字为rightup-->
<frame src="内容.html"name="rightdown"><!--80%中下边80％给内容.html文件使用,框架名字为rightdown-->
</frameset>
</frameset>
</html>

然后创建目录.html文件，代码如下:

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<title>目录</title>
  </head>
  <body>
  <h1>目录</h1>	
	<a href="内容1.html"target="rightdown">内容1</a><br> <!--将内容1文件的内容指定显示给名为rightdown的框架-->
 <a href="内容2.html"target="rightdown">内容2</a><br> <!--将内容2文件的内容指定显示给名为rightup的框架-->
  </body><!--上边的target为指定-->
</html>

创建标题.html代码如下:

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" >
	<title>标题</title>
  </head>
  <body>	
	<h1>框架点击目录框架，显示在内容框架</h1> </body>
</html>

创建内容.html，代码如下:

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<title>内容</title>
  </head>
  <body>	
	请认真看注释！
  </body>
</html>

创建内容1.html这个文件需要点击目录才会显示代码如下:

<html>
 <head> 
  <meta charset="utf-8"> 
  <title>内容1</title> 
 </head> 
 <body > 
 我是御雪
  </body>
</html>

创建内容2.html意思同上，代码如下:

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8">
	<title>内容2</title>
  </head>
  <body>	
	csdn
  </body>
</html>

到这里就结束了！

    原文作者：可怜少年秃了头
    原文地址: https://blog.csdn.net/qq_46133630/article/details/109539401
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞