Html标签之frameset&图片切换

浏览数：34 / 时间：2015年06月09日

　　今天为大家分享一下刚刚总结好的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>