有两个html页面，如果点击第一页中的特定图像，它将转到第二个html页面。 如果点击第二个html页面的任何地方，它应该回到第一页并在第一页的一个div中完全显示第二页
1st html page :
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/styles.css" type="text/css" />
<script type="text/javascript" src="../js/scripts.js"></script>
<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
</head>
<body class="wt-bg" onload="initPr()">
<table class="header">
<tr>
<td id="branding2">
<div>
<img src="images/slogo.png">
</div>
</td>
<td id="header-recent">
<div>
<a href=""><img class="topbar-icon" alt="Recent" src="images/nav_re.png"></a> <a
href=""><img class="topbar-icon" alt="Gift" src="images/nav_gt.png"></a> <a href=""><img
class="topbar-icon" alt="New" src="images/nav_new.png"></a>
</div>
</td>
<td class="header-uscart">
<div>
Hello <label id="username"></label>
<a onclick="openH()"><img class="topbar-icon" alt="Home" src="images/nav_ho.png"></a>
<a onclick="openUsDe()"><img class="topbar-icon" alt="Account" src="images/nav_act.png"></a>
<a onclick="openPre()"><img class="topbar-icon" alt="Settings" src="images/nav_pref.png"></a>
<a onclick="openCt()"><img class="topbar-icon" alt="Cart" src="images/nav_shcart.png"></a>
<a onclick="openWce()"><img class="topbar-icon" alt="Logout" src="images/nav_custcare.png"></a>
</div>
</td>
</tr>
</table>
<table class="main" border="1">
<tr>
<td class="left-bar top">
<div id="left-scroll">
<div class="category-title">Category</div>
<ul id="cat-list" class="category-list">
<li class="category-title">Category</li>
<li class="category-name"><a onclick="openCategory('toys')" class="no-underline">Kids
toys</a></li>
<li class="category-name"><a onclick="openCategory('mobile')" class="no-underline">Mobile</a></li>
<li class="category-name"><a onclick="openCategory('tv')" class="no-underline">Television</a></li>
<li class="category-name"><a onclick="openCategory('clothing')" class="no-underline">Clothing</a></li>
<li class="category-name"><a onclick="openCategory('watches')" class="no-underline">Watches</a></li>
</ul>
</div>
</td>
<td class="top">
<div id="item-content">
<div class="div-home">
<marquee scrollamount="2">
<div class="home-subtitle">Favorite Brand Store
Favorite Brand Store
Favorite Brand Store
</div>
</marquee>
<div class="hscrollview">
<img class="small-icon" src="images/le_small.png" onclick="openItem()">
<img class="small-icon" src="images/sams_small.png">
<img class="small-icon" src="images/gucci_small.png">
<img class="small-icon" src="images/se_small.png">
<img class="small-icon" src="images/dis_small.png">
<img class="small-icon" src="images/leo_small.png">
</div>
</div>
<div class="div-home">
<marquee scrollamount="2">
<div class="home-subtitle">Offers
Offers
</div>
</marquee>
<div class="hscrollview">
<div class="excl-offer">
RemoteControlled Toys<br>
<img class="small-icon" src="images/nav_side_ad2.png">
</div>
<div class="excl-offer">
Trousers<br>
<img class="small-icon" src="images/nav_side_ad4.png">
</div>
<div class="excl-offer">
Watches<br>
<img class="small-icon" src="images/nav_side_ad1.png">
</div>
<div class="excl-offer">
Phones<br>
<img class="small-icon" src="images/nav_side_ad5.png">
</div>
</div>
</div>
</div>
</td>
<td class="right-bar left-border top">
<div id="right-scroll">
<ul style="list-style-type: none; padding-left: 0px">
<li><img class="small-icon" src="images/naspeoffer.png">
<li><img class="small-icon" src="images/ntoy.png">
<li><img class="small-icon" src="images/mob.png">
<li><img class="small-icon" src="images/tel.png">
<li><img class="small-icon" src="images/clot.png">
<li><img class="small-icon" src="images/wat.png">
</ul>
</div>
</td>
</tr>
</table>
<div id="product-details">
<div style="display: table-row;">
<div class="inline-block">
<img id="product_image" src="" width="150px" height="150px">
</div>
<div class="inline-block top" style="height: 150px; border: 1px solid green;">
<input type="hidden" id="pid" value="0"> <label id="product_name" class="bold font4"></label><br>
<label id="product_desc"></label><br> <label id="product_cost"></label>
<button class="roundbutton no-border button-font" onclick="adToCa(1)">BUY</button>
</div>
<table class="match-parent">
<tr>
<td class="left">
<button class="roundbutton no-border button-font" onclick="opHome()">Continue
Shopping</button>
</td>
<td class="right">
<button class="roundbutton no-border button-font" onclick="adToCa(0)">Add to
Shopping Cart</button>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
需要在第一个html页面中显示以下第二个html页面。
第二页HTML：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Insert title here</title>
<link rel="stylesheet" href="../css/styles.css" type="text/css" />
<script type="text/javascript" src="../js/scripts.js"></script>
<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>
</head>
<body>
<div id="initial-div" class="full-banner">
<div class="Item-header">
<img src="images/aa.png" style="margin-right: 50px;">
<label class="item-link1" onclick="showItemByGen('bbb','men')">Men</label>
<label class="item-link1" onclick="showItemByGen('ccc','women')">Women</label>
<label class="item-link1" onclick="showItemByGen('ddd','shoe')">Shoes</label>
</div>
<div id="item-content">
<img id="image-current" src="images/item1.png" onclick="openItemInFirstPage()"
style="max-width: 100%; max-height: 100%; margin: auto; display: block;>
<div id="ITemTouch">
<div id="images">
<img src="images/itemimg1.png">
<img src="images/itemimg2.png">
<img src="images/itemimg3.png">
</div>
</div>
</div>
</div>
Clicked the image with id="image-current" in 2nd page : onclick="openItemInFirstPage() which takes to 1st page , also it takes the 2nd page html in a variable and appends it to 1st page div as below
openItemInFirstPage = function(){
SysJump.go("shop_home.html");
$('#item-content').empty();
var brand = 'aaa';
var gender = 'women';
var levisitem = '<div id="initial-div" class="full-banner"> '
+ '<div class="Item-header"> '
+ ' <img src="images/aa.png" style="margin-right: 50px;"> '
+ ' <label class="item-link1" onclick="showItemByGen('bbb','men')">Men</label> '
+ ' <label class="item-link1" 'onclick="showItemByGen('ccc','women')">Women</label> '
+ ' <label class="item-link1" onclick="showItemByGen('ddd','shoe')">Shoes</label> '
+ '</div> '
+ '<div id="item-content"> '
+ '<img id="image-current" src="images/item1.png" onclick="openItemInFirstPage()"
style="max-width: 100%; max-height: 100%; margin: auto; display: block;> '
+ ' <div id="ITemTouch"> '
+ ' <div id="images"> '
+ ' <img src="images/itemimg1.png"> '
+ ' <img src="images/itemimg2.png"> '
+ ' <img src="images/itemimg3.png"> '
+ ' </div> '
+ ' </div> '
+ ' </div> '
+ ' </div>'
alert(item);
$('#item-content').append(item);
}
但我没有在div中获得第二页。如果我在var项中添加它，则无效。为什么会这样？
我的css是：
.brand-header {
display: table-row;
border: 1px solid red;
background: black;
width: 100%;
}
.full-banner {
border: 1px solid red;
background: black;
width: 100%;
position: absolute;
}
.brand-link1 {
display: table-cell;
color: white;
font-family: calibri;
font-size: 25px;
width: 100px;
text-align: center;
vertical-align: middle;
}
.small-icon {
width: 120px;
height: 120px;
margin-left: 10px;
margin-right: 10px;
padding-bottom: 20px;
}
答案 0 :(得分：0)
你可以使用iframe
在第一页内使用<iframe style="width:200px;height:200px" src="you 2nd page url"></iframe>