Html标签之frameset&amp;图片切换

2024-04-27 14:29:10

字体：大中小

来源：转载

供稿：网友

Html标签之frameset&图片切换

　　今天为大家分享一下刚刚总结好的html经验，以备不时之需。

　　首先介绍一下frameset标签，此标签用于同一页面内切换网页，在大多数网页中都可以看到，因为项目的需要，故而研究一二。

　　frameset标签不能放置在body标签之中，它的具体实现如下：

工程项目结构：

主页面代码（index.jsp）：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!--     同一页面内相互切换    cols:左右分割框架    frameborder:设置分割线的宽度    noresize:设置分割线不可拖动 --><frameset cols="10%,*" frameborder="no">    <frame src="title01.jsp" noresize/>    <frame src="content01.jsp" name="content"/><!-- name的值用来唯一标示该框架 --></frameset>

左侧链接页面（title01.jsp）：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>   <body style="background-color: red;">    <a href="content01.jsp" target="content">标题1</a><br/><!-- target:用来指定跳转后显示的框架 -->    <a href="content02.jsp" target="content">标题2</a><br/>    <a href="content03.jsp" target="content">标题3</a><br/>    <a href="content04.jsp" target="content">标题4</a><br/>  </body></html>

　　右侧内容显示界面（为普通的jsp界面），最后附一张效果图供大家研究。

　　下面为大家介绍一种最简单的Html中图片切换方法：

项目工程结构：

页面代码（index.jsp）：

<%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>图片切换</title>    <meta http-equiv="PRagma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keyWords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <link rel="stylesheet" type="text/CSS" href="css/common.css">    <script type="text/Javascript" src="js/jquery-1.11.1.js"></script>    <script type="text/javascript" language="javascript">        $(function(){            $(".thumbs a").click(function(){                var largePath = $(this).attr("href");                var largeAlt = $(this).attr("title");                $("#largeImg").attr({                    src : largePath,                    alt : largeAlt                });                return false;            });        });    </script>  </head>    <body>      <h2>图片切换</h2>      <p><img id="largeImg" src="images/img1-lg.jpg" alt="Large Image"/></p>      <p class="thumbs">        <a href="images/img2-lg.jpg" title="Image2"><img src="images/img2-thumb.jpg"></a>        <a href="images/img3-lg.jpg" title="Image3"><img src="images/img3-thumb.jpg"></a>        <a href="images/img4-lg.jpg" title="Image4"><img src="images/img4-thumb.jpg"></a>        <a href="images/img5-lg.jpg" title="Image5"><img src="images/img5-thumb.jpg"></a>        <a href="images/img6-lg.jpg" title="Image6"><img src="images/img6-thumb.jpg"></a>    </p>  </body></html>

效果图：