gpt4 book ai didi

html - 如何在不使用 jquery 的情况下在另一个 html 页面 div 中显示 html 页面

转载 作者:行者123 更新时间:2023-11-28 08:40:57 31 4
gpt4 key购买 nike

有两个 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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Favorite Brand Store&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Favorite Brand Store&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Offers&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</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;
}

最佳答案

你可以为此使用 iframe

在你的第一页使用

<iframe style="width:200px;height:200px" src="you 2nd page url"></iframe>

关于html - 如何在不使用 jquery 的情况下在另一个 html 页面 div 中显示 html 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27815706/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com