a1网页中Div如何显示另一网页a2的Div内容，帮忙代码更改

php597 2018-07-15 11:08:50


1:73行里如何更改，其它地方如何更改调整。
2：<iframe src="http://127.0.0.1:80/h_php/cp/a2.php"width="730" height="130" scrolling="no" ></iframe>，
请大师指点。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery鼠标滑过div提示另一网页的div</title>



</head>

<body>

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>

<script type="text/javascript">

$(function(){

    var a;   

    //给选择的列表项绑定两个事件，第一个是鼠标移动到列表项上触发的，第二个是鼠标移开时触发的

    $(".cover-emst em").hover(function(){

   

        if(a){

            //事先清除定时器函数

            window.clearTimeout(a)

        }

        var c=this;

        a=window.setTimeout(function(){

            //这里的c就是上面选择的em，也就是列表项

            //这句话的意思是选择列表项中的类名为.detail-frame的div的内容

            var g=$(".detail-frame",c).html();

            //获得图片相对于文档的便宜，是两个数值，单位是像素

            var i=$(">a",c).offset().left;

            var h=$(">a",c).offset().top;

            //如果列表项的宽度为150，则j=160，否则j=img元素的宽度+10

            if($(c).width()==150){

                var j=160

            }else{

                var j=$(">a",c).width()+10

            }

            //在body中插入class="detail-tip"的div

            $("body").append('<div class="detail-tip"></div>');

            //如果列表项有r-end的属性

            if($(c).hasClass("r-end")){

                //那么就在这个div中加入下面的元素，并设置位置（class="arrow-right"定义的要么是css sprite的图片，要么是文字图标，显示是图片）

                $(".detail-tip").html(g).append('<span class="arrow-right"></span>').css("left",i+j-492).css("top",h);

            }else{

                //否则……两个位置不同，这些位置都是经过计算的

                $(".detail-tip").html(g).append('<span class="arrow-left"></span>').css("left",i+j).css("top",h);

            }

               

        },200)

    },function(){

        //鼠标离开列表项时清除定时器，移除div

        if(a){

            window.clearTimeout(a)

        }

        $(".detail-tip").remove()

    });

});

</script>

   

<style type="text/css">

*{margin:0;padding:0;emst-style-type:none;}

a,img{border:0;}

body{font:16px/180% Arial, Helvetica, sans-serif, "新宋体";}  

.detail-frame{display:none;}

.arrow-left{position:absolute;width:6px;height:9px;top:10px;left:0;margin-left:-66px;background:url(images/arrow_gray.gif) no-repeat;}

.arrow-right{position:absolute;width:6px;height:9px;top:30px;left:320px;background:url(images/arrow_gray.gif) no-repeat -6px 0;}

/*提示框的调整*/

.detail-tip{position:absolute;margin-left:100px;width:700px;background:#CCE8CF;border:1px soemd #ddd;padding:10px;}

.detail-tip h2{font-size:12px;emne-height:18px;color:#3366cc;}

.detail-tip p{margin:10px 0 0 0;font-size:14px;}

</style>

   

   

         

<table width="100" border="2">

  <tr>

     <td><div class="cover-emst"><em><div class="detail-frame"><h2>要显示a2网页的div1</h2><p>显示id="container1"的内容</p></div>

                 <a href="#" target="_parent">1：Div_1</a></em></div></td>

  </tr>

  <tr>

<td><div class="cover-emst"><em><div class="detail-frame"><h2>要显示a2网页的div2</h2><p>显示id="container2"的内容</p></div>

                 <a href="#" target="_parent">2：Div_2</a> </em></div> </td>

  </tr>

  <tr>

    <td><div class="cover-emst"> <em ><div class="detail-frame"><h2>要显示a2网页的div5</h2><p>显示id="container5"的内容</p></div>

                 <a href="#" target="_parent">5：Div_5</a> </em></div> </td>

  </tr>

</table>

    

</body>

</html>
...全文
182 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
php597 2018-07-17
  • 打赏
  • 举报
 回复
一个网页里鼠标经过不同的地方要有不同的DIV内容，一类是制作不同的网页让选择，相对简单，但要制作较多的网页供选择。
二类是显示一个网页里不同的DIV，这个较复杂。
php597 2018-07-16
  • 打赏
  • 举报
 回复
显示第一个div,第二个没能显示，咋调整还是没能调整过来。论坛好像不能留联系方式远程协助，哈哈
Logerlink 2018-07-16
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>jquery鼠标滑过div提示另一网页的div</title>

	</head>

	<body>

		<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>

		<script type="text/javascript">

			$(function() {

				var a;

				//给选择的列表项绑定两个事件，第一个是鼠标移动到列表项上触发的，第二个是鼠标移开时触发的

				$(".cover-emst em").hover(function() {

					if(a) {

						//事先清除定时器函数

						window.clearTimeout(a)

					}

					var c = this;

					a = window.setTimeout(function() {

						//这里的c就是上面选择的em，也就是列表项

						//这句话的意思是选择列表项中的类名为.detail-frame的div的内容

						//var g = $(".detail-frame", c).html();

						let containerId = $(c).children('a').data('type').toString();	// --

						var g = getHtml(containerId);	//--

						//获得图片相对于文档的便宜，是两个数值，单位是像素

						var i = $(">a", c).offset().left;

						var h = $(">a", c).offset().top;

						//如果列表项的宽度为150，则j=160，否则j=img元素的宽度+10

						if($(c).width() == 150) {

							var j = 160

						} else {

							var j = $(">a", c).width() + 10

						}

						//在body中插入class="detail-tip"的div

						$("body").append('<div class="detail-tip"></div>');	//--

						$('.detail-tip').html(g)	// --

						//如果列表项有r-end的属性

						if($(c).hasClass("r-end")) {

							//那么就在这个div中加入下面的元素，并设置位置（class="arrow-right"定义的要么是css sprite的图片，要么是文字图标，显示是图片）

							$(".detail-tip").html(g).append('<span class="arrow-right"></span>').css("left", i + j - 492).css("top", h);

						} else {

							//否则……两个位置不同，这些位置都是经过计算的

							$(".detail-tip").html(g).append('<span class="arrow-left"></span>').css("left", i + j).css("top", h);

						}

					}, 200)

				}, function() {

					//鼠标离开列表项时清除定时器，移除div

					if(a) {

						window.clearTimeout(a)

					}

					$(".detail-tip").remove()

				});

			});

			// --

			function getHtml(containerId){

				 let iframeEl = window.frames['newIframe'];

				 let container = iframeEl.document.getElementById(containerId);

				 return $(container).clone();

			}

		</script>

		<style type="text/css">

			*{margin:0;padding:0;emst-style-type:none}

			a,img{border:0}

			body{font:16px/180% Arial,Helvetica,sans-serif,"新宋体"}

			.detail-frame{display:none}

			.arrow-left{position:absolute;width:6px;height:9px;top:10px;left:0;margin-left:-66px;background:url(images/arrow_gray.gif) no-repeat}

			.arrow-right{position:absolute;width:6px;height:9px;top:30px;left:320px;background:url(images/arrow_gray.gif) no-repeat -6px 0}

			.detail-tip{position:absolute;margin-left:100px;width:700px;background:#CCE8CF;border:1px soemd #ddd;padding:10px}

			.detail-tip h2{font-size:12px;emne-height:18px;color:#36c}

			.detail-tip p{margin:10px 0 0 0;font-size:14px}

		</style>

		<table width="100" border="2">

			<tr>				<td>

					<div class="cover-emst">

						<em>

							<div class="detail-frame"><h2>要显示a2网页的div1</h2><p>显示id="container1"的内容</p></div>

     						<a href="#" target="_parent" data-type="container1">1：Div_1</a>

						</em>

					</div>

				</td>

			</tr>

			<tr>

				<td>

					<div class="cover-emst"><em><div class="detail-frame"><h2>要显示a2网页的div2</h2><p>显示id="container2"的内容</p></div>

                 <a href="#" target="_parent"  data-type="container2">2：Div_2</a> </em></div>

				</td>

			</tr>

			<tr>

				<td><div class="cover-emst"> <em><div class="detail-frame"><h2>要显示a2网页的div5</h2><p>显示id="container5"的内容</p></div>

                 <a href="#" target="_parent"  data-type="container3">5：Div_5</a> </em></div></td>

			</tr>

		</table>

	</body>

	<!--到时  将这个Iframe设为隐藏即可   -->

	<iframe name="newIframe" src="iframe2.html" width="730" height="130" scrolling="no" ></iframe>

</html>

iframe2.html的代码如下


<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<body>

		<div id="container1">

			内容一

		</div>

		<div id="container2">

			内容二

		</div>

		<div id="container3">

			内容三

		</div>

	</body>

</html>
Java--HTML锚点连接
锚点例子 网页第一部分 网页第二部分 <div style="height:900px; background:#CCCCCC">div> 1返回顶部 <div style="height:900px; background:#999999">div> 2返回顶部 <div style="height:900px; background:#666666">div>
将一个div 里的内容显示在另外的一个div里面
现有两个div: 这里显示a1的内容 div2显示内容 现在我们要实现如下功能： 将id为a2的div容器里的内容替换为a1里面的内容， jQuery实现代码如下： 这里显示a1的内容 div2显示内容 $(function(){ $("#a2"
ASP.NET毕业设计食堂餐饮管理系统实战
或以上版本 课程类型：全过程录像（50+课时、极个别课程声音模糊） 作品类型：定制作品 作品难度：中 代码注释：有 业务逻辑/功能逻辑：强 开发技术：C#、ADO.NET、ASP.NET、用户自定义控件、日历控件、富文本编辑器...
html中div是什么效果,网页设计中的DIV是什么意思，CSS是什么意思？
在网页设计中，我们都会用到DIV+CSS设计网页，那么什么是DIV，什么又是CSS呢？1.DIVDIV，比较专业的解释是“层叠样式表单元的位置和层次划分”，通俗地讲，就是“块”的意思，我们可以把一个网页理解为由N个块组成的，用标签“...”表示一个块，其中第一个“”表示这个块的开始标签，最后的表示结束标签，中间的“...”为内容(根据实际情况，这个内容可以是纯文字，也可以是HTML标签，DIV本身...
java div_动态添加、删除div
在项目开发中，有时需要在一个页面动态地增加和删除一段固定的内容。下面代码即可实现在a1和a2之间动态地添加一个div块。12添加divvari=1;functionaddDiv(){//创建div结点vardiv=document.createElement("div");//设置div属性div.id="div"+i;//添加div内容if(i>2){alert("只能添加4...
JavaScript

87,919

社区成员

224,618

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章